/*
Theme Name: child
Template: twentytwentyfour
*/

/* TEKO */
html, body { font-family:"Teko", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; letter-spacing:.2px; }
h1,h2,h3,h4,h5,h6,.site-title,.entry-title,.woocommerce-loop-product__title,.product_title{
  font-family:"Teko",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important; letter-spacing:.5px; font-weight:200;
}
button,input,select,textarea,.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  font-family:"Teko",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}
nav ul li {
    padding: 0 25px !important;
}
.page .entry-title,
.wp-block-post-title {
    display: none !important;
}
.current-menu-item > a,
.current_page_item > a,
.current_page_parent > a,
.current-menu-ancestor > a {
    text-decoration: underline !important;
    text-underline-offset: 4px; /* nicer spacing */
}

/* ===== Justified-look (stable flex) ===== */
.wc-justified{
  --wj-gap: 10px;            /* set by JS too */
  --wj-row-h: 220px;         /* set by JS too */
  max-width:1600px;
  margin:0 auto;
  padding:0 20px;
  display:flex;              /* flex container */
  flex-wrap:wrap;
  gap:var(--wj-gap);
  align-items:flex-start;
}

.wj-item{
  display:block;
  flex: 0 0 auto;            /* width provided via JS (flex-basis) */
  min-width:0 !important;    /* allow shrink */
  max-width:none !important;
  margin:0 !important;
  text-decoration:none;
  border-radius:0;
  box-shadow:none;
}

.wj-item figure{ margin:0; } /* remove default WP figure margin */

.wj-img{
  display:block;
  width:100%;
  height:var(--wj-row-h);
  object-fit:cover;
  transition:transform .2s ease;
  background:#f4f4f4;
}
.wj-item:hover .wj-img{ transform:scale(1.01); }	


/* Make the UL be the flex row container */
.wc-justified > .wp-block-post-template{
  display:flex;
  flex-wrap:wrap;
  gap: var(--wj-gap, 10px);
  align-items:flex-start;
  margin:0; padding:0;
}
.wc-justified > .wp-block-post-template > li{
  list-style:none;
  margin:0; padding:0;
}

/* Tile content */



.wj-title{  font-size:18px; text-transform:uppercase; color:#111; }
/* Remove rounded corners from featured images and containers */
.wj-item img,
.wj-item figure,
.wp-block-post-featured-image img,
.wp-block-post-featured-image,
.wp-block-image img {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Center the gallery grid horizontally */
.wc-justified > .wp-block-post-template {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; /* ← centers the whole row group */
  gap: var(--wj-gap, 10px);
  align-items: flex-start;
  margin: 0 auto; /* centers inside parent */
  padding: 0;
  max-width: 1600px;
}

/* Optional: center pagination too */
.wc-justified .wp-block-query-pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* === Single Product Page (Flat Style) === */
.single-product .wp-block-woocommerce-product-image-gallery img {
  transition: none !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.single-product .wp-block-woocommerce-product-image-gallery img:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Optional: clean up spacing & typography */
.single-product .wp-block-post-title {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5em;
}

.single-product .price {
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.3px;
}

.single-product .wp-block-woocommerce-product-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-top: 10px;
}

.single-product .wp-block-woocommerce-add-to-cart-form {
  margin-top: 20px;
}

/* Optional: reduce space between columns */
.single-product .wp-block-columns {
  gap: 30px !important;
}
/* === Single Product Page (Flat Style) === */
.single-product .wp-block-woocommerce-product-image-gallery img {
  transition: none !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.single-product .wp-block-woocommerce-product-image-gallery img:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Optional: clean up spacing & typography */
.single-product .wp-block-post-title {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5em;
}

.single-product .price {
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.3px;
}

.single-product .wp-block-woocommerce-product-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-top: 10px;
}

.single-product .wp-block-woocommerce-add-to-cart-form {
  margin-top: 20px;
}

/* Optional: reduce space between columns */
.single-product .wp-block-columns {
  gap: 30px !important;
}
.single-product .wj-img:hover {
  transform: none !important;
}

/* Woo Blocks product gallery – kill any image transform/transition */
.wc-block-product-gallery img,
.wc-block-product-gallery__image img,
.wc-block-product-gallery__image:hover img {
  transform: none !important;
  transition: none !important;
}

/* Classic gallery markup (some installs still output these classes) */
.woocommerce div.product div.images img,
.woocommerce div.product div.images figure:hover img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image:hover img {
  transform: none !important;
  transition: none !important;
}

/* Also remove the "zoom" cursor if it was set */
.wc-block-product-gallery__image a,
.woocommerce div.product div.images .zoom {
  cursor: default !important;
}
.tax-product_cat .wj-item:hover .wj-img {
  transform: scale(1.01);
}
/* ===== STOP all zoom/scale on the single product gallery ===== */
.single-product .wc-block-product-gallery img,
.single-product .wc-block-product-gallery__image img,
.single-product .wc-block-product-gallery__media img,
.single-product .woocommerce-product-gallery__image img {
  transform: none !important;
  transition: none !important;
}

/* Some themes scale the container, not the <img> */
.single-product .wc-block-product-gallery__image,
.single-product .wc-block-product-gallery__media,
.single-product .woocommerce-product-gallery__image {
  transform: none !important;
}

/* If a zoom overlay image is injected (classic zoom plugin) */
.single-product img.zoomImg { display: none !important; }

/* Remove zoom cursor hints */
.single-product .wc-block-product-gallery__image a,
.single-product .woocommerce div.product div.images .zoom {
  cursor: default !important;
}
/* === Minimal Add to Cart button styling === */
.single-product .single_add_to_cart_button,
.single-product .wp-block-button__link,
.single-product .wc-block-components-button {
  background: none !important;
  border: none !important;
  color: #0055ff !important; /* your preferred blue */
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0 !important;
  box-shadow: none !important;
  transition: color .2s ease;
}

.single-product .single_add_to_cart_button:hover,
.single-product .wp-block-button__link:hover,
.single-product .wc-block-components-button:hover {
  color: #0033aa !important; /* darker blue on hover */
  background: none !important;
  text-decoration: underline;
}
/* ========== SINGLE PRODUCT: make the gallery align RIGHT and tighten gaps ========== */

/* Make the LEFT column (the one with the gallery) right-aligned */
.single-product .wp-block-columns > .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* push gallery to the right edge */
}

/* Ensure the Blocks gallery itself doesn't recenter with margins */
.single-product .wp-block-columns > .wp-block-column:first-child
  .wc-block-product-gallery,
.single-product .wp-block-columns > .wp-block-column:first-child
  .woocommerce-product-gallery {
  margin: 0 !important;
  width: 100%;
  max-width: 1200px; /* tweak if you want the image smaller/larger */
  align-self: flex-end; /* extra guard to keep it right-aligned */
}

/* Reduce space between the main image and anything below it */
.single-product .wc-block-product-gallery__media,
.single-product .woocommerce-product-gallery {
  gap: 8px !important; /* vertical gap right under the big image */
}

/* Thumbnails row: right-align and small gaps */
.single-product .wc-block-product-gallery__thumbnails,
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  justify-content: flex-end !important; /* align thumbs to the right */
  gap: 6px !important;                  /* space between thumbs */
  margin-top: 8px !important;
}

/* Remove li default margins */
.single-product .wc-block-product-gallery__thumbnails li,
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  margin: 0 !important;
}

/* Thumbnail size (adjust to taste) */
.single-product .wc-block-product-gallery__thumbnails img,
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
  width: 92px !important;
  height: auto !important;
  border-radius: 0 !important;
  object-fit: cover;
  display: block;
}

/* Make sure big image isn’t adding stray margins/padding */
.single-product .wc-block-product-gallery__image,
.single-product .woocommerce-product-gallery__image {
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.single-product .wc-block-product-gallery__image img,
.single-product .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.wc-block-components-checkout-mailpoet {
  display: none !important;
}

/* --- Fix product category grid layout --- */
ul.products,
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 40px !important;
  justify-content: center !important;
}

/* Center each product */
ul.products li.product,
.wc-block-grid__product {
  margin: 0 auto !important;
  text-align: center;
}

/* Prevent large images from stretching unevenly */
ul.products li.product img,
.wc-block-grid__product img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Optional: keep consistent spacing between rows */
ul.products,
.wc-block-grid__products {
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1100px; /* or your preferred width */
}
/* ===== PRODUCT CATEGORY “JUSTIFIED” GRID (stable) ===== */
.tax-product_cat .wc-justified {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1600px;
}

.tax-product_cat .wc-justified > .wp-block-post-template{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--wj-gap) !important;
  align-items: flex-start !important;
  justify-content: center !important; /* center the row set */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  box-sizing: border-box;
}



.tax-product_cat .wj-item{
  display: block;
  flex: 0 0 auto;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  text-decoration: none;
  border-radius: 0;
  box-shadow: none;
}

.tax-product_cat .wj-item figure{ margin: 0 !important; }

.tax-product_cat .wj-img{
  display: block;
  width: 100%;
  height: var(--wj-row-h);
  object-fit: cover;
  transition: transform .2s ease;
  background: #f4f4f4;
}

.tax-product_cat .wj-title{
  font-size: 18px;
  text-transform: uppercase;
  color: #111;
}

/* subtle hover */
.tax-product_cat .wj-item:hover .wj-img{
  transform: scale(1.01);
}
/* === FORCE LEFT-ALIGNED ROWS ON CATEGORY PAGES === */

/* Kill any auto-centering from earlier blocks */
.wc-justified > .wp-block-post-template{
  justify-content: flex-start !important;
  margin: 0 !important;
}

/* Category-specific – strongest selector */
.tax-product_cat .wc-justified > .wp-block-post-template{
  justify-content: flex-start !important;   /* left align all rows */
  margin-left: 0 !important;                /* no centering */
  margin-right: auto !important;
}

/* If the UL/grid version ever appears on this site, left-align that too */
.tax-product_cat ul.products,
.tax-product_cat .wc-block-grid__products{
  justify-content: flex-start !important;
  margin: 0 !important;
}
/* Keep full image, fix spacing between tiles */


/* === FINAL — product strip ================================================= */

.wc-prod-strip{
  --text-col: 240px;     /* fixed text column width (keeps book column aligned) */
  --tile-w: 360px;       /* tile width (adjust if needed) */
  --tile-ar: 3/4;        /* aspect ratio; we’ll overwrite from PHP if possible */
  margin: 2.5rem 0;
}

/* Grid: [text] [book] [illustrations] [merch] */
.wc-prod-strip .wc-cat-row__content{
  display: grid !important;
  grid-template-columns: var(--text-col) var(--tile-w) var(--tile-w) var(--tile-w) !important;
  column-gap: 32px !important;
  align-items: start !important;
  justify-content: center !important;
}

/* left text */
.wc-prod-strip .wc-cat-row__title{
  margin: 0 !important;
  width: var(--text-col) !important;
  white-space: normal !important;
  align-self: start !important;
}

/* place tiles directly in the grid cells */
.wc-prod-strip__tiles{ display: contents !important; }

/* every tile uses the EXACT same box */
.wc-prod-strip__tile{
  width: var(--tile-w) !important;
  height: auto !important;
  aspect-ratio: var(--tile-ar) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* anchor & image fill the box */
.wc-prod-strip__tile > a{
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: stretch !important;
  justify-content: center !important;
  line-height: 0 !important;
}
.wc-prod-strip__tile > a > img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-position: center center !important;
  vertical-align: middle !important;
}

/* book (first tile) = contain; categories = cover */
.wc-prod-strip__tile:not(.wc-prod-strip__tile--overlay) > a > img{
  object-fit: contain !important;
}
.wc-prod-strip__tile.wc-prod-strip__tile--overlay > a > img{
  object-fit: cover !important;
}

/* overlay */
.wc-prod-strip__tile--overlay .wc-prod-strip__overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.wc-prod-strip__tile--overlay:hover img{ opacity:.6; }
.wc-prod-strip__tile--overlay:hover .wc-prod-strip__overlay{ opacity:.6; }
.wc-prod-strip__overlay-title{
  font-size: clamp(1.125rem, 2.6vw, 2rem);
  background: rgba(255,255,255,.85);
  padding: .35em .6em; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
}

@media (max-width: 900px){
  .wc-prod-strip .wc-cat-row__content{
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
    justify-items: center !important;
  }
  .wc-prod-strip .wc-cat-row__title{ width:auto !important; text-align:center !important; }
  .wc-prod-strip__tile{ max-width: 90% !important; }
}


/* Make each tile the positioning context for its overlay */
.wc-prod-strip__tile{
  position: relative !important;
}

/* Overlay fills the tile and sits above the image, centered */
.wc-prod-strip__tile--overlay .wc-prod-strip__overlay{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  pointer-events: none !important; /* keep the link clickable */
}

/* Image stays below the overlay */
.wc-prod-strip__tile--overlay > a > img{
  position: relative !important;
  z-index: 1 !important;
}

/* Optional: ensure label looks consistent */
.wc-prod-strip__overlay-title{
  line-height: 1 !important;
  padding: .35em .6em !important;
}
/* Remove the background box from overlay text */
.wc-prod-strip__overlay-title {
  background: none !important;   /* remove the white rectangle */
  color: #ffffff !important;     /* make the text pure white */
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* slight glow for readability */
  padding: 0 !important;
  font-weight: 600;
  letter-spacing: .05em;
}
.wc-prod-strip__tile--overlay:hover .wc-prod-strip__overlay-title {
  color: #333 !important; /* dark grey */
}

body.page .wp-site-blocks > *:first-child {
  margin-bottom: 0.5rem !important;
}

body.page .entry-content > h1 {
  margin-top: 0.5rem !important;
}
/* Tighten space between site header and first content block ("KNIHY") */
.wp-site-blocks > .wp-block-template-part:first-child { 
  margin-bottom: 8px !important;            /* header bottom space */
}

/* Kill any padding/margin the first content container might add */
.wp-site-blocks main,
.wp-site-blocks .wp-block-post-content {
  padding-top: 0 !important;
}

.wp-site-blocks main > *:first-child,
.wp-site-blocks .entry-content > *:first-child,
.wp-site-blocks .wp-block-group:first-child,
.wp-site-blocks .wp-block-heading:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If a Spacer block is the first element, remove it */
.wp-site-blocks .wp-block-spacer:first-child {
  display: none !important;
}
/* === PRODUCT PAGE: adjust gallery spacing === */

/* Space between the main product image and thumbnails */
.single-product .wc-block-product-gallery__media,
.single-product .woocommerce-product-gallery {
  gap: 8px !important;             /* reduce space below big image */
  margin-bottom: 0 !important;
}

/* Control gap between individual thumbnails */
.single-product .wc-block-product-gallery__thumbnails,
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  justify-content: flex-start;
  gap: 10px !important;             /* horizontal spacing between thumbs */
  margin-top: 30px !important;      /* distance from main image */
}

/* Remove default margins around <li> */
.single-product .wc-block-product-gallery__thumbnails li,
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  margin: 0 !important;
}

/* Thumbnail size (optional tweak) */
.single-product .wc-block-product-gallery__thumbnails img,
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
  width: 150px !important;
  height: auto !important;
  object-fit: cover;
  border-radius: 0;
}

/* Optional: tighten space between gallery column and product details */
.single-product .wp-block-columns {
  gap: 30px !important;  /* adjust horizontal gap between image + text */
}

.vb-breadcrumbs { margin: 20px 0 12px 360px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.vb-breadcrumbs a { color: inherit; text-decoration: none; }
.vb-breadcrumbs a:hover { text-decoration: underline; }


/* Make tiles line up in a row with a base gap */
.wc-prod-strip .wc-prod-strip__tiles {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 2rem; /* normal gap between tiles 2 and 3 */
}

/* Remove any margins other rules might add */
.wc-prod-strip .wc-prod-strip__tile {
  margin: 0 !important;
}

/* Extra space after the first tile: doubles 1→2 gap */
.wc-prod-strip .wc-prod-strip__tile:nth-child(1) {
  margin-right: 4rem !important; /* same as gap => 1→2 looks doubled */
}
/* Restore normal image width inside flex */
.wc-prod-strip .wc-prod-strip__tile {
  flex: 0 0 auto !important; /* NO shrinking, keep natural size */
}

/* Ensure images stay at their native size */
.wc-prod-strip .wc-prod-strip__img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important; /* responsive */
  display: block;
}
/* 1) Tiles in a row, gaps already working */
.wc-prod-strip .wc-prod-strip__tiles {
  display: flex !important;
  gap: 2rem;
}

.wc-prod-strip .wc-prod-strip__tile:nth-child(1) {
  margin-right: 2rem !important; /* bigger gap 1 → 2 */
}

/* 2) Make every tile use the same aspect ratio (from PHP: --tile-ar) */
.wc-prod-strip .wc-prod-strip__tile {
  position: relative;
  aspect-ratio: var(--tile-ar); /* e.g. 3/4 from first image */
  overflow: hidden;
  flex: 0 0 auto;
}

/* 3) Image fills the tile and is cropped consistently */
.wc-prod-strip .wc-prod-strip__tile a {
  display: block;
  width: 100%;
  height: 100%;
}

.wc-prod-strip .wc-prod-strip__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;       /* crop instead of distort */
  display: block;
}
.wc-prod-strip .wc-cat-row__title-line1 {
  margin-top: 2rem;
}

/* Second line (year) */
.wc-prod-strip .wc-cat-row__title-line2 {
  margin-top: 0.3rem;
}
.single-product .wp-block-post-title {
    display: block !important;
    visibility: visible !important;
    color: inherit !important;
    font-weight: bolder;
}
.wp-block-post-title {
    font-size: var(--wp--preset--font-size--large) !important;



}
.single-product .wp-block-columns {
    column-gap: 90px !important;
    gap: 90px !important;
}
.single-product .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 52% !important; /* smaller left column */
}

.single-product .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 48% !important; /* larger right column */
}

.single-product .wp-block-columns > .wp-block-column:last-child {
    margin-top: 30px !important; /* adjust value */
}
.single-product .wp-block-columns > .wp-block-column:first-child {
    margin-top: 20px !important; /* adjust value */
}

.page .entry-content .wp-block-columns {
    column-gap: 60px !important;
    gap: 60px !important;
}
.page .entry-content .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 50% !important; /* smaller left column */
}

.page .entry-content .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 50% !important; /* larger right column */
}

.page .entry-content .wp-block-columns > .wp-block-column:last-child {
    margin-top: 10px !important; /* adjust value */
}