body {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body {
    background-color: #fafbfc;
    background-image: url('/img/img-noise-361x370.png');
    background-size: 180px 185px;
}

/* ---- */
/* GLOBAL */
/* ---- */
.opacity-0 {
    opacity: 0 !important;
}
.opacity-100 {
    opacity: 1 !important;
}
a.dropdown-toggle:focus {
    outline: none;
    box-shadow: none;
}
.row.no-outer-gutters {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.row.no-outer-gutters > [class^="col"] {
  padding-right: 0 !important;   /* levý sloupec nebude mít padding */
}
.row.no-outer-gutters > [class^="col"]:not(:last-child) {
  padding-left: 1rem; /* mezera jen doprava mezi sloupci */
}
@media (max-width: 768px) {
    .row.no-outer-gutters > [class^="col"]:not(:last-child) {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
}

/* ---- */
/* MENU */
/* ---- */
.dropdown-item:hover {
    background-color: transparent !important;
}


/* ---- */
/* CART */
/* ---- */
.fly-img {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(.55, .09, .68, .53), opacity 0.8s ease;
  will-change: transform, opacity;
}
/* Cart – responsivní chování */
#cart-list .cart-item { gap: 1.25rem; }
#cart-list .cart-thumb { width: 110px; flex-shrink: 0; }
#cart-list .remove-wrap { position: static; margin-top: .5rem; }
#cart-list .qty-wrap { justify-content: flex-start; }

@media (min-width: 768px) {
#cart-list .cart-thumb { width: 150px; }
#cart-list .remove-wrap { position: absolute; right: 0; bottom: 1rem; margin-top: 0; }
#cart-list .qty-wrap { justify-content: flex-end; }
}

/* ---- */
/* CHECKOUT */
/* ---- */
.sticky-summary {
  position: sticky;
  top: 100px; /* vzdálenost od horního okraje */
}
.option-group{background:#fff;border:1px solid #000;}
.option-item{padding:.75rem .9rem;display:block;background:#fff;}
.option-item + .option-item{border-top:1px solid #000;}
.option-item .rowline{display:flex;align-items:center;gap:.5rem;}
.option-item input.form-check-input{margin:0;}
.option-item .form-check-circle{--random-rotation: 88deg;}
.option-item .label-text{margin-left:.25rem;flex:1 1 auto;}
.option-item .price{margin-left:.75rem;white-space:nowrap;}
.option-item.is-disabled { opacity: .55; }

.option-item .extra-slot{
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .26s ease, opacity .2s ease;
}
.option-item .extra-slot.show{
    opacity:1;
    max-height:9999px; /* fallback, inline max-height má prioritu */
}
.price-col {
  min-width: 11ch;       /* aby se cena nezalomila na více řádků */
  white-space: nowrap;   /* zákaz zalomení */
  text-align: right;     /* zarovnání doprava */
}
.checkout .row { --bs-gutter-x: 1.5rem; } /* když by ti někde ulítávaly negativní okraje */


/* ---- */
/* FILTERS */
/* ---- */

/* ZÁKLAD */
/* Kolečko = vždy čtverec a žádné natahování ve flexu */
.form-check-circle{
  --size: 29px;
  flex: 0 0 var(--size);       /* zabrání flex stretchi */
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1 / 1;         /* jistota „kruhu“ i při zoomu */
  box-sizing: border-box;      /* border se počítá do rozměru */
  border: 1px solid #000;
  border-radius: 50%;
  background:#fff;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  margin-right:.5rem;
}

/* Barvy: gradient/solid se dál nastavuje zde nebo inline (style="background: ...") */
.form-check-color {
  background: var(--color, white);
}

/* Skrytý checkbox – PLATÍ JEN VE FILTRECH */
.filters .form-check-input,
.shop .form-check-input,
.checkout .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Checkmark přes pseudo-element – nechá gradient pod tím být */
.form-check-circle::after {
  content: '';
  position: absolute;
  inset: 0;                                  /* vycentrovat */
  background-image: url('/img/checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: rotate(var(--random-rotation, 0deg));
  opacity: 0;                                /* neviditelný ve výchozím stavu */
  transition: opacity 0.15s ease;
}

/* Po zaškrtnutí jen zviditelníme fajfku; gradient zůstává */
/* fajfka jen ve filtrech */
.filters .form-check-input:checked + .form-check-circle::after,
.shop .form-check-input:checked + .form-check-circle::after,
.checkout .form-check-input:checked + .form-check-circle::after {
  opacity: 1;
}


/* Varianta pro tmavé pozadí (pokud potřebuješ bílou fajfku) */
.form-check.dark-bg .form-check-circle::after {
  background-image: url('/img/checkmark-white.svg');
}





/* ---- */
/* ARTWORKS */
/* ---- */

.artwork-image {
    transition: opacity 0.4s ease;
}
.artwork-image.current {
    z-index: 1;
}
.artwork-image.next {
    z-index: 2;
}

.artwork-thumb {
    -webkit-box-shadow: -3px 3px 4px -3px rgba(0,0,0,0.3);
    box-shadow: -3px 3px 4px -3px rgba(0,0,0,0.3);
}
.artwork-thumb:hover .edit-button {
    display: block !important;
}
/* Obrázky v galerii vždy přes celou šířku rodiče */
.artwork-img,
.product-img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: block;
}

/* Na desktopu: výška max 50% viewportu a zarovnání vlevo */
@media (min-width: 768px) {
  .artwork-img,
  .product-img {
    max-height: 75vh;
    width: auto;              /* aby respektoval max-height */
    object-fit: contain;
    object-position: left center;
    margin-right: auto;       /* zarovná obrázek doleva v rámci flexu */
  }
}


.edit-button {
    z-index: 10;
}

.edit-button a {
    opacity: 0.9;
    transition: opacity 0.2s;
}

.edit-button a:hover {
    opacity: 1;
}

/* Ujisti se, že obrázky mají nižší z-index */
.artwork-image.current {
    z-index: 1;
}
.artwork-image.next {
    z-index: 2;
}


/* Rozměry – zobrazit jen při hoveru */
.artwork-thumb:hover + div .artwork-dimensions-hover {
    opacity: 1 !important;
}

/* Stavová tečka – viditelná vždy */
.artwork-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 2px;
}
.artworks_show .artwork-status-dot {
    margin-bottom: 2px;
}

/* Stavové barvy */
.status-reserved { background-color: #ff6a00; }
.status-sold { background-color: #ff0055; }
.status-unavailable { background-color: #ff0055; }
.status-available { background-color: #42E295; }



/* ---- */
/* SHOP */
/* ---- */
.category-toggle .chev-up { display: none; }
.category-toggle[aria-expanded="true"] .chev-down { display: none; }
.category-toggle[aria-expanded="true"] .chev-up { display: inline-block; }

/* vypni focus/active rámeček na current sorting/caret tlačítku (mobil i desktop) */
.category-toggle,
.sort-toggle {
  -webkit-tap-highlight-color: transparent;
}

.category-toggle:focus,
.category-toggle:focus-visible,
.category-toggle:active,
.sort-toggle:focus,
.sort-toggle:focus-visible,
.sort-toggle:active {
  outline: none !important;
  box-shadow: none !important;
}

/* když je použité .btn (Bootstrap) – jistota, že nic „neblikne“ */
.category-toggle.btn,
.sort-toggle.btn {
  --bs-btn-focus-shadow-rgb: 0,0,0; /* neškodné */
  box-shadow: none !important;
  border-color: transparent !important;
}

/* pro případ, že proklik zachytí label uvnitř (některé mobilní prohlížeče) */
.sort-list .sort-option:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ---- */
/* OBJECTS */
/* ---- */
body.category-2 {
background: #E5E3DF;
background: linear-gradient(0deg, rgba(229, 227, 223, 1) 0%, rgba(237, 235, 230, 1) 100%);
}
/* BIO */
body.parent-none {
background: #EBEDDF;
}
/* TATTOO */
body.parent-5 {
background: #DFE0E5;
}

/* ---- */
/* Custom Bootstrap */
/* ---- */
body,
.text-dark, 
.link-dark,
.link-dark:hover{
    color: #000!important;
}
b, strong {
    font-weight: 600!important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 3rem!important;
    margin-bottom: 1rem!important;
}
p {
    margin-bottom: 1rem!important;
}
.text-primary,
.link-primary {
    color:#0C00FF!important;
}
.link-primary:hover {
    color:#0000CC!important;
}
.btn-primary {
    background-color: #0C00FF!important;
    border-color: #0C00FF!important;
}
.bg-primary {
    background-color:#0000CC!important
} 
.border-primary {
    border-color:#0000CC!important
}

.pages_show .text a,
.shop_show .text a,
.artworks_show .text a {
    color: #000!important;
}

/* Custom gutter g-6 = 6rem */
.g-6 {
  --bs-gutter-x: 6rem;
  --bs-gutter-y: 6rem;
}

@media (min-width: 576px) {
  .g-sm-6 {
    --bs-gutter-x: 6rem;
    --bs-gutter-y: 6rem;
  }
}

@media (min-width: 768px) {
  .g-md-6 {
    --bs-gutter-x: 6rem;
    --bs-gutter-y: 6rem;
  }
}

@media (min-width: 992px) {
  .g-lg-6 {
    --bs-gutter-x: 6rem;
    --bs-gutter-y: 6rem;
  }
}

@media (min-width: 1200px) {
  .g-xl-6 {
    --bs-gutter-x: 6rem;
    --bs-gutter-y: 6rem;
  }
}

@media (min-width: 1400px) {
  .g-xxl-6 {
    --bs-gutter-x: 6rem;
    --bs-gutter-y: 6rem;
  }
}
@media (min-width: 768px) { /* md breakpoint */
  .fs-md-5 {
    font-size: 1.25rem !important; /* velikost odpovídající fs-5 */
  }
}
@media (min-width: 768px) { /* md breakpoint v Bootstrapu */
  .fixed-md-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030; /* stejně jako .fixed-bottom */
  }
}




/* ---- */
/* GLightbox */
/* ---- */
.glightbox-container .goverlay {
  background: rgba(255, 255, 255, 1);
}
/* Barva šipek a zavíracího tlačítka */
.glightbox-container .gbtn {
    background: none !important;
    opacity: 1 !important;
}
.glightbox-container .gbtn svg *{
    stroke: #000 !important; /* nebo jiná tmavá barva */    
    fill: #000 !important;
}

/* Zavírací křížek – někdy potřebuje i toto: */
.glightbox-close svg path {
  stroke: #111 !important;
}
.glightbox-clean .gslide-media {
    -webkit-box-shadow:none;
    box-shadow: none;
}


/* ---- */
/* Switch */
/* ---- */
/* Zvětšený switch */
/* Mírné zvětšení */
.form-check-input.toggle-used-switch {
    width: 2.4rem;   /* původně cca 2rem */
    height: 1.3rem;  /* původně cca 1rem */
}

/* "knob" – posuvník uvnitř */
.form-check-input.toggle-used-switch::before {
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
}



.pages_show .text *,
.shop_show .text *,
.artworks_show .text * {
    max-width: 540px;
    height: auto;
}

/* ---- */
/* HEADER */
/* ---- */
.logo{
    position: relative;
    display: block;
    z-index: 100;
    color: #000000;
}
.logo svg {
    position: absolute;
    z-index: -1;
    left: 0;
    top: -10px;
}
.logo .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 10s linear alternate infinite;  
}

@keyframes dash {
  10% { stroke-dashoffset: 1000; }
  25% { stroke-dashoffset: 0; }
  32% { stroke-dashoffset: 1000; }
}

/* Stabilní scrollbar (bez poskočení) */
html { scrollbar-gutter: stable; }

/* Navbar vrstva (nad overlay) */
.main-navbar { --navbar-h: 64px; }

/* Toggler: hamburger ↔ křížek (bez animací výšky) */
.collapse { transition: none !important; }
.collapsing { transition: none !important; height: auto !important; }
.navbar-toggler .toggler-icon-close { display: none; }
.navbar-toggler.collapsed .toggler-icon-burger { display: inline-block; }
.navbar-toggler.collapsed .toggler-icon-close { display: none; }
.navbar-toggler:not(.collapsed) .toggler-icon-burger { display: none; }
.navbar-toggler:not(.collapsed) .toggler-icon-close { display: inline-block; }

/* ----------------------- */
/* MOBIL: overlay s PROLNUTÍM + CENTRUM */
/* ----------------------- */
@media (max-width: 991.98px) {

  .mobile-overlay.collapse,
  .mobile-overlay.collapsing {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    background: #fff;
    z-index: 1;                 
    padding: calc(var(--navbar-h, 64px) + 16px) 1rem 2rem;
    overflow-y: auto;

    /* Prolnutí */
    opacity: 0;
    transition: opacity .25s ease-out !important;
    will-change: opacity;

    pointer-events: none;

    /* Vycentrování obsahu */
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertikálně */
    align-items: center;     /* horizontálně */
    text-align: center;      /* texty taky na střed */
  }

  .mobile-overlay.collapse.show {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-overlay.collapsing {
    opacity: 0;
    pointer-events: none;
  }

  /* Odkazy */
  .mobile-overlay .navbar-nav {
    width: 100%;
  }

  .mobile-overlay .navbar-nav .nav-link {
    text-align: center!important;   /* text odkazu na střed */
    font-size: 1.5rem;
    padding: .5rem 0;
  }
  .mobile-overlay .navbar-nav .dropdown-item {
    text-align: center!important; 
  }

  /* Jazyk/měna dole vycentrované */
  .mobile-overlay .w-100.pb-3 {
    text-align: center;
  }
}

/* ----------------------- */
/* DESKTOP: menu doprava   */
/* ----------------------- */
@media (min-width: 992px) {
  .main-navbar .navbar-collapse { justify-content: flex-end !important; }
  .main-navbar .navbar-nav { margin-left: auto !important; }
}

/* Aktivní odkaz – podtržení obrázkem */
.navbar .active {
    background-color: transparent !important;
}
.navbar .active span {
    display: inline-block;
    background-image: url('/img/line.svg');
    background-position: center bottom;
    background-size: 220px 10px;
    background-repeat: repeat-x;
}

/* ----------------------- */
/* VOLITELNÉ: lock scrollu */
/* ----------------------- */
html.menu-open, body.menu-open { overflow: hidden; }





/* ----------------------- */
/* PAGES   */
/* ----------------------- */
@media (min-width: 768px) { /* od md breakpointu */
  img.full_width {
    max-width: 60vh;
    width: auto; /* aby to nebylo roztažené */
    display: block;
    margin: 0; 
  }
}

@media (max-width: 767.98px) { /* pod md */
  img.full_width {
    max-width: none;
    width: 100%; /* mobilně klasicky na celou šířku */
  }
}

/* ----------------------- */
/* TATTOO PAGES   */
/* ----------------------- */
.parent-5 h1,
.parent-5 h1 *,
.parent-5 .text *,
.parent-5 .text a {
    color:#0C00FF!important
}
.parent-5 .text .btn-primary,
.parent-5 .text .btn-primary * {
    color:#ffffff!important
}





/* ----------------------- */
/* NEWSLETTER   */
/* ----------------------- */
.modal-backdrop.show { background-color:#0C00FF !important; opacity:0.15 !important; }