/* =========================
   Reset + základ
   ========================= */
@font-face {
  font-family: main_text;
  src: url(./fonts/Montserrat-Regular.ttf);
}

@font-face {
  font-family: main_H;
  src: url(./fonts/Montserrat-Bold.ttf);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: main_text, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #000;
  background: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
header nav ul li {
  font-family: main_H, Arial, Helvetica, sans-serif;
  color: #000;
}

/* =========================
   Header
   ========================= */
/*
   header zde sticky a rozmazane pozadi – zakomentováno dle požadavku
   */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  /* úplně průhledné pozadí */
  backdrop-filter: blur(2.5px);
  /* jemný základní blur */
  -webkit-backdrop-filter: blur(4px);
  /* Safari */
  overflow: hidden;
  /* aby pseudo-element nepřetékal */
}

/* pseudo-element s přechodovým „gradient blur“ efektem */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}

.site-header .container {
  margin: 0 auto;
  padding: 15px 20px;
  min-height: calc(4rem + 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
  color: #000;
  max-height: 2.1rem;
  display: inline-flex;
  align-items: center;
}

.brand img {
  max-height: 2.1rem;
  display: block;
}

/* Skupina loga + ikony aktuální kategorie (jen když v kategorii jsme) */
.brand-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.category-nav-link {
  display: inline-flex;
  align-items: center;
  opacity: .8;
  transition: opacity .2s ease;
}

.category-nav-link:hover,
.category-nav-link:focus-visible {
  opacity: 1;
}

.category-nav-link img {
  height: 2.1rem;
  width: auto;
  display: block;
}

@media (max-width: 800px) {
  .brand-group {
    width: 100%;
  }
}

/* Menu bez absolute: underline animace přes background */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}

.menu a {
  text-decoration: none;
  color: #000;
  font-weight: 600;
  padding: .25em 0;
  background-image: linear-gradient(#000, #000);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size .2s ease;
}

.menu a:hover {
  background-size: 100% 1px;
}

/* =========================
   Hlavní grid dlaždic
   ========================= */
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* Dlaždice: bez absolutních vrstev, jen background + gradient overlay */
.tile {
  --bg: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  cursor: pointer;
  color: #fff;

  /* Obrázek s mírným tmavým překryvem */
  background:
    linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    var(--bg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;

  /* Jen plynulý přechod pozadí, ne transform celé dlaždice */
  transition: background-size 1s ease, filter 1s ease, transform 0.8s cubic-bezier(.7, 1.5, .5, 1);
}

.tile {
  position: relative;
  /*addition, kdyztak smazat*/
  /* backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0); 
  will-change: transform, filter; */
}

/*addition, kdyztak smazat*/
/* .category-title, 
.category-sub-title, 
.product-title, 
.aboutme, 
.malba-text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Zabrání "poskakování" textu o 1px při začátku animace */
  /* transform: translateZ(0); */
/* } */

.availability-dot {
  position: absolute;
  bottom: 2rem;      /* Vzdálenost od spodního okraje */
  right: 2rem;       /* Vzdálenost od pravého okraje */
  width: 1rem;       /* Velikost tečky */
  height: 1rem;
  background-color: #FF3838; /* Červená dle předlohy */
  border-radius: 50%;        /* Kulatý tvar */
  z-index: 10;               /* Aby byla nad obrázkem */
  pointer-events: none;      /* Aby neblokovala kliknutí na dlaždici */
}

/* Drag-and-drop handle – globálně skrytý, zobrazí se jen adminu v edit módu */
.drag-indicator {
  display: none;
}

a .privacy{
  text-decoration: none;
  color: #000;
  padding: .25em 0;
  background-image: linear-gradient(#000, #000);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size .2s ease;
}

a .privacy:hover{
  background-size: 100% 1px;
}
#about {
  /* background: #f0f0f0;  */
  color: #000;
  text-align: left;
  align-items: flex-start; 
  justify-content: flex-start;
  gap: 2rem;
  transition: background 1s ease, filter 1s ease, transform 0.8s cubic-bezier(.7, 1.5, .5, 1);
  background: rgba(0, 0, 0, .45);
}
#contact {
  background: rgba(255, 255, 255); 
  color: #000;
  text-align: left;
  align-items: flex-start; 
  justify-content: flex-start;
  gap: 2rem;
  cursor: default;
  transition: background 1s ease, filter 1s ease, transform 0.8s cubic-bezier(.7, 1.5, .5, 1);
}
#contact:hover {
  background-size: 100%;
  filter: none;
}

#contactform {
  background: rgba(255, 255, 255); 
  color: #000;
  text-align: left;
  align-items: flex-start; 
  justify-content: flex-start;
  gap: 2rem;
}
#doodle,
#doodle:hover {
  transform: none !important;
  filter: none !important;        /* Zabrání rozsvícení */
  background-size: cover !important; 
  cursor: default;
}
#doodle {
  /* Důležité: Rodič musí být relative, aby se tlačítko chytilo jeho rohů */
  position: relative;
  
  /* Flexbox necháme, aby se canvas roztáhl */
  display: flex;       
  padding: 0;
  background: #ffffff;
  overflow: hidden;
  cursor: default;
  transition: transform 0.8s cubic-bezier(.7, 1.5, .5, 1);
}

#drawingCanvas {
  width: 100%;
  height: 100%; /* Canvas nyní vyplní celou dlaždici */
  flex: 1; 
  display: block; /* Odstraní mezery pod canvasem */
  touch-action: none;
  cursor: url('../storage/doodle_cursor.png'), auto;
}

#resetBtn {
  /* ZMĚNA: Absolutní pozice pro umístění "přes" canvas */
  position: absolute;
  bottom: 0;
  left: 0;
  
  /* ZMĚNA: Tlačítko nechceme přes celou šířku, ale jen malé v rohu */
  width: auto; 
  min-width: 60px; /* Nebo nastavte pevnou šířku např. 3rem */
  height: 2.5rem;  /* Trochu vyšší pro snazší stisk prstem */
  
  padding: 0 15px;
  background: rgba(0, 0, 0, 0.45); /* Poloprůhledná černá */
  color: #fff; /* Bílý text/ikona, aby to bylo vidět na tmavém pozadí */
  border: none;
  
  /* Zakulacení jen v pravém horním rohu tlačítka pro hezčí efekt */
  
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 10; /* Ujistí se, že je NAD canvasem */
  transition: background 0.3s ease;
}

#resetBtn:hover {
  background: rgba(0, 0, 0, 0.7); /* Ztmavnutí při najetí */
}

#about:hover {
  cursor: default;
  filter: brightness(1.6);
  background: rgba(0, 0, 0, .15);
}

.aboutme{
  margin-top:0;
  margin-bottom:0.5rem;
  font-size:0.9rem;
}


/*KDYZ KATEGORIE-PRODUKTY TAKY NEBUDEME CHTIT, ABY BYLY ZATMAVENY*/
.tile.product {
  cursor: default;
  background: var(--bg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 1s ease, transform 0.8s cubic-bezier(.7, 1.5, .5, 1);
}

.product-title{
  font-weight: 100;
  font-size: 1.3rem;
  color: #000000;
  padding: 0;
  margin: 0;
  font-family: main_text, Arial, sans-serif;
}
.product-description{
  margin: 0;
  padding: 0;
}

.tile.product.normal{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: left;
}

.tile.product.normal:hover{
  cursor: pointer;
}

.tile.product:hover {
  background-size: 110%;
  filter: none;
}

.tile-animate {
  transform: scale(0.9) rotate(-1deg);
}

.tile:hover {
  background-size: 110%;
  /* obrázek se "zvětší" */
  filter: brightness(1.6);
  /* jemné zesvětlení */
}

.tile img {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: .5rem;
  filter: brightness(0) invert(1);
}

.tile h2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* schovaný stav */
.tile img {
  opacity: 0;
  transform: translateX(-8px);
  /* trošku mimo, aby vznikl slide efekt */
  width: 1.5rem;
  height: 1.5rem;
  margin-left: .5rem;
  filter: brightness(0) invert(1);
  transition: opacity .4s ease, transform .4s ease;
}

/* při hoveru obrázek plynule přijede */
.tile:hover img {
  opacity: 1;
  transform: translateX(0);
}

.tile.is-malba {
  position: relative;
  overflow: hidden;
  /* odstraníme tvůj globální dark overlay tímto: */
  background: none !important;
  filter: none !important;
}

/* vrstvy bez gradientů */
.tile.is-malba::before,
.tile.is-malba::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  transition:
    opacity 0.9s ease,
    background-size 1s ease;
}

/* hlavní obrázek */
.tile.is-malba::before {
  background-image: var(--bg-main);
  opacity: 1;
}

/* closeup obrázek */
.tile.is-malba::after {
  background-image: var(--bg-close);
  opacity: 0;
}

/* hover – zoom + prolnutí, žádný brightness */
.tile.is-malba:hover::before,
.tile.is-malba:hover::after {
  background-size: 110%;
}

.tile.is-malba:hover::before {
  opacity: 0;
}

.tile.is-malba:hover::after {
  opacity: 1;
}

.tile.is-malba .availability-dot {
  z-index: 2;
}


.category-sub-title {
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
  /* na obecné dlaždici bez mezery */
  text-align: center;
}

/* Nadpis na dlaždici (už ne absolute) */
.category-title {
  color: inherit;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0;
  /* na obecné dlaždici bez mezery */
  text-align: center;

}
.available-painting{
  background-color: #8FFF38;
  border-radius: 1rem;
  width:1rem;
  height:1rem;
}

.unavailable-painting{
  background-color: #FF3838;
  border-radius: 1rem;
  width:1rem;
  height:1rem;
}
.availability{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap:1rem;
}
.availability p{
  margin:0.5rem;
  color:#000;
}

main a {
  text-decoration: none;
}

/* =========================
   Speciál: #category-description
   (textový blok – běžný flow)
   ========================= */
#category-description {
  display: flex;
  flex-direction: column;
  /* nadpis + odstavec pod sebou */
  align-items: flex-start;
  justify-content: flex-start;
  gap: .75rem;
  padding: 3rem 2rem;
  background: #fff;
  /* žádný overlay */
  color: #000;
  aspect-ratio: auto;
  /* odemkne výšku podle obsahu */
  cursor: default;
}

#category-description .category-title {
  margin: 0 0 .5rem 0;
  /* mezera pod nadpisem */
  color: #000;
}

#category-title-description {
  color: #000;
  font-size: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 0;
}

/* Vypnutí hover efektu pro textový blok */
#category-description:hover {
  transform: none;
  filter: none;
}

/* =========================
   Formuláře (černobílý styl)
   ========================= */
form>.field {
  width: 320px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}

legend h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #000;
}

.field_position {
  margin: 12px 0;
}

.field_position label {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #444;
}

.field {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 14px;
}

.submit_button {
  margin-top: 16px;
  text-align: right;
}

.submit_button_style {
  padding: 8px 14px;
  border: 1px solid #333;
  background: #333;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.submit_button_style:hover {
  background: #555;
}

.form_msg--error {
  display: none;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #900;
  background: #f8d7da;
  color: #900;
  border-radius: 4px;
  font-size: 13px;
}

#loginForm {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.remove-btn {
  background: #d00;
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 26px;
  cursor: pointer;
  padding: 0;
}

.remove-btn:hover {
  background: #a00;
}

#add-file-btn {
  margin-top: 15px;
}

/* =========================
   Switch (bez absolute layoutu – jen pro knob interně)
   ========================= */
.switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
}

.switch input {
  /* skryjeme vizuálně, ale ponecháme přístupné */
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
}

/* slider bez absolute podkladu – používá border + transform */
.slider {
  display: flex;
  align-items: center;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background-color: #ccc;
  transition: background-color .2s;
  padding: 3px;
  /* prostor pro kolečko */
}

.slider::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .2s;

}

.switch input:checked+.slider {
  background-color: #4caf50;
}

.switch input:checked+.slider::after {
  transform: translateX(20px);
}

.switch-label {
  font-size: .9rem;
  color: #333;
}

/* =========================
   Toolbar + tlačítka
   ========================= */
.add-category-bar {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #f6f7f8;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  gap: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.2rem;
  border-radius: 12px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}

.btn:hover {
  background: #000;
  color: #fff;
}

.btn-large {
  font-size: 1.05rem;
  padding: 1rem 1.4rem;
  background: #4caf50;
  color: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(76, 175, 80, .24);
}

.btn-large:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(76, 175, 80, .32);
}

.btn-primary {
  background: #000;
  color: #fff;
}

.btn-primary:hover {
  background: #333;
}

.hidden {
  display: none !important;
}

/* Form container */
.form-container {
  max-width: 600px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid #000;
  border-radius: 8px;
}

.form-container h1 {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #000;
}

.form,
.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form .field {
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
}

.form .field label {
  font-weight: 600;
  margin-bottom: .4rem;
  color: #111;
}

.form .field input,
.form .field textarea {
  padding: .6rem .8rem;
  font-size: 1rem;
  border: 1px solid #000;
  border-radius: 4px;
  background: #fff;
  color: #000;
}

.form .field input:focus,
.form .field textarea:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 0 2px #0001;
}

.form .hint {
  font-size: .85rem;
  color: #555;
  margin-top: .3rem;
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

footer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  /* vertikální centrování obsahu */
}

.about {
  padding: 2rem;
}


footer>div {
  /* textový blok */
  width: 100%;
}

/* =========================
   Fix pro dlaždici Formuláře (Vypnutí animací)
   ========================= */

#contactform,
#contactform:hover {
  transform: none !important;        /* Žádné zvětšování */
  filter: none !important;           /* Žádná změna jasu */
  background-size: cover !important; /* Pozadí se nebude přibližovat (záleží na vašem bg) */
  cursor: default;                   /* Kurzor se nezmění na ručičku pro celou dlaždici */
}

/* 2. Roztáhnutí formuláře na celou šířku */
#contactform .contact-section {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  display: flex;
  justify-content: center;
}

#contactform .minimal-form {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* =========================
   Černý design formuláře
   ========================= */

/* --- Inputy (Email a Předmět) --- */
.minimal-form input[type="email"],
.minimal-form input[type="text"] {
  width: 100%;
  border: none;
  /* ZMĚNA: Linka je hned černá (#000), ne šedá */
  border-bottom: 1px solid #000; 
  padding: 10px 0;
  font-family: main_text, Arial, sans-serif;
  font-size: 1rem;
  color: #000;
  outline: none;
  background: transparent;
}

/* Placeholder (napověda) - světle šedá, aby se odlišila od černé linky */
.minimal-form input::placeholder {
  color: #aaa; 
}

/* --- Textarea (Zpráva s linkami) --- */
.minimal-form textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: vertical;
  font-family: main_text, Arial, sans-serif;
  font-size: 1rem;
  color: #000;
  line-height: 2rem;
  padding: 0;
  background-color: transparent;
  
  /* ZMĚNA: Linky jsou nyní černé (#000) místo šedé */
  background-image: linear-gradient(transparent 96%, #000 97%, transparent 100%);
  background-size: 100% 2rem;
  background-attachment: local;
}

.minimal-form textarea::placeholder {
  color: #aaa;
  opacity: 1;
}

/* --- Mizející text po kliknutí --- */
.minimal-form textarea:focus::placeholder,
.minimal-form input:focus::placeholder {
  color: transparent;
}

/* --- Patička --- */
.form-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.upload-label {
  color: #aaa; /* Zůstává šedá, zčerná až po najetí myší */
  font-family: main_text, Arial, sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.3s;
}

.upload-label:hover {
  color: #000;
}

.submit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
  
  font-family: main_H, Arial, sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  text-transform: lowercase;
  text-decoration: none;

  padding: 0.25em 0; 
  background-image: linear-gradient(#000, #000);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size .2s ease;
}

.submit-btn:hover {
  background-size: 100% 1px;
  text-decoration: none;
}

.hidden {
  display: none;
}

/* Kontejner pro text - umístěn dole */
/* Kontejner pro text - umístěn dole vlevo */
.malba-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* Padding 2rem odpovídá odstupu na obrázku */
  padding-bottom: 1rem;
  padding-left: 2rem;     
  
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Přilepení k dolnímu okraji */
  align-items: flex-start;   /* ZAROVNÁNÍ DOLEVA */
  
  opacity: 0;          
  transition: opacity 0.5s ease;
  
  z-index: 10;
  pointer-events: none; 
  background: transparent; 
}

/* Styl samotného textu */
.malba-text {
  font-weight: 100;  
  
  /* Velikost písma 20px (při vašem základu 15px je to cca 1.35rem) */
  font-size: 1.3rem;      
  
  color: #000;          
  line-height: 1.3;     /* Menší řádkování, aby text držel pohromadě */
  margin: 0;
  text-align: left;     /* Text zarovnaný vlevo */
}

/* Hover efekt - zobrazení */
.tile.is-malba:hover .malba-info {
  opacity: 1;
}

/* =========================
   Responsivita
   ========================= */
@media (min-width: 3000px) {
  main {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 2160px) {
  main {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  main {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) and (pointer: coarse) and (hover: none) {

  html,
  body {
    font-size: 15px;
    padding: 0;
    margin: 0;
    background: #fff;
    width: 100%;
  }

  main {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1rem 0.5rem;
  }
  .tile, 
  .tile:hover, 
  #about, 
  #about:hover, 
  #doodle, 
  .tile.is-malba:hover::before, 
  .tile.is-malba:hover::after {
    /* Vypnutí všech transformací a animací */
    transform: none !important;
    transition: none !important;
    background-size: cover !important; /* Zabrání zoomování pozadí */
    filter: none !important;           /* Zabrání zesvětlování na mobilu */
  }

  /* Explicitní vypnutí deformační třídy, pokud by ji JS přesto přidal */
  .tile-animate {
    transform: none !important;
  }
  #contactform{
    max-width: 100%;
  }
}

/* =========================
   Stránka produktu – fotky v jednom centrovaném (prostředním) sloupci
   Platí jen pro #product-photos-grid, mřížka kategorií (#products-grid) není dotčena.
   ========================= */
#product-photos-grid {
  grid-template-columns: repeat(3, 1fr);
}

#product-photos-grid #category-description {
  grid-column: 1;
}

#product-photos-grid .tile[data-image-id] {
  grid-column: 2;
}

@media (max-width: 600px) {
  #product-photos-grid {
    grid-template-columns: 1fr;
  }
  #product-photos-grid #category-description,
  #product-photos-grid .tile[data-image-id] {
    grid-column: 1;
  }
}