/* ==========================================================================
   Kiss-Iskolabútor – WooCommerce (kategória / Shop oldal)
   A Storefront termékrácsát a jóváhagyott demó kártya-stílusára formázza.
   A demó eredeti markupját nem írjuk felül (verzióbiztos), csak stílusozzuk.
   ========================================================================== */

/* ---- Teljes szélesség (sidebar eltávolítva a functions.php-ban) ---- */
.woocommerce .content-area,
.woocommerce-page .content-area {
  width: 100%;
  float: none;
  margin-right: 0;
}
.woocommerce #secondary,
.woocommerce-page #secondary {
  display: none;
}

/* ---- Kategória / Shop fejléc ---- */
.woocommerce-products-header {
  margin-bottom: 8px;
}
.woocommerce-products-header__title,
.woocommerce-products-header h1,
.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
}
.woocommerce-products-header__title {
  font-size: 27px;
}
.term-description p,
.woocommerce-products-header p {
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---- Breadcrumb (demó .breadcrumb hangulat) ---- */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--ink-soft);
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--navy);
}

/* ---- "Rendezés" legördülő + találatszám ---- */
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---- Termékkártya (demó .product-card) – modern, lekerekített, árnyék
   alapú kártya (a kemény szegély helyett finom emelkedés hover-re). ---- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--white);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 0 0 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(35, 42, 47, .06), 0 1px 3px rgba(35, 42, 47, .04);
  transition: box-shadow .25s ease, transform .25s ease;
  overflow: hidden;
  text-align: left;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(3, 73, 144, .12), 0 4px 10px rgba(35, 42, 47, .08);
}

/* Kép terület – egységes 3:2,3 arányú doboz mindenhol. object-fit: contain
   MINDKÉT esetnél (termék ÉS kategória-csempe is), hogy a kép SOSE
   vágódjon le – a kategória-képek a gyakorlatban nem egységes, kontrollált
   arányú fotók (pl. termékfotók újrahasznosítva), ezért itt sem
   biztonságos a cover-alapú, levágó kitöltés. */
.woocommerce ul.products li.product a img {
  margin: 0 0 16px;
  padding: 14px;
  box-sizing: border-box;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--mist);
  aspect-ratio: 3 / 2.3;
  object-fit: contain;
  object-position: center;
  border-radius: 16px 16px 0 0;     /* felül a kártya lekerekítését követi, alul egyenes a szöveg felé */
  transition: transform .5s ease;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04);
}
/* A kategória-bélyegképek a WooCommerce/WordPress által generált, NÉGYZETES
   (pl. 324×324) fájlok – a fenti fekvő (3:2,3) doboz helyett négyzetes
   dobozt adunk nekik. Mivel a doboz aránya (1:1) és a képek valós aránya
   (1:1) így már egyezik, a "contain" belső margója/matt háttere ("keret"-
   hatás) feleslegessé vált: itt visszaváltunk "cover"-re, ami éltől élig,
   keret nélkül tölt ki – érdemi levágás nélkül, hiszen az arányok
   egyeznek. */
.woocommerce ul.products li.product-category a img {
  aspect-ratio: 1 / 1;
  padding: 0;
  background: none;
  border-bottom: none;
  object-fit: cover;
}
.woocommerce ul.products li.product-category:hover a img {
  transform: scale(1.06);
}

/* Terméknév */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  padding: 0 16px;
  line-height: 1.35;
}

/* Kategória-kártya címe (Termékek oldal) – a terméknévvel egyező, visszafogott
   méret és belső margó; a WooCommerce által hozzáfűzött darabszám ("(411)")
   halványabb és kisebb, hogy ne vigye el a hangsúlyt a kategórianévről. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  padding: 0 16px;
  line-height: 1.35;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* Ár (monospace, navy – demó .pprice) */
.woocommerce ul.products li.product .price {
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-mono);
  padding: 0 16px;
  display: block;
  margin: 4px 0 12px;
}
.woocommerce ul.products li.product .price del {
  color: var(--ink-soft);
  font-weight: 400;
}

/* Gomb a kártyán (demó .mini-btn: navy körvonal) – felülírja a globális narancsot */
.woocommerce ul.products li.product .button {
  display: inline-block;
  margin: 0 16px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
  padding: 8px 14px;
  transition: background .15s ease, color .15s ease;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--navy);
  color: #fff;
}
.woocommerce ul.products li.product .added_to_cart {
  display: inline-block;
  margin: 8px 16px 0;
  font-size: 12.5px;
  color: var(--orange);
}


/* ==========================================================================
   Termékoldal (single product) – a demó adatlap-stílusa
   A WooCommerce eredeti markupját stílusozzuk (nem írjuk felül a sablont).
   Megjegyzés: a demó választói (Korcsoport, Fémváz szín) valódi
   attribútumokból jönnek majd – azokat az attribútum-fázisban építjük.
   ========================================================================== */

/* Cím (pd-title) */
.single-product div.product .product_title.entry-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--navy);
  margin-bottom: 10px;
}

/* Ár (pd-price) */
.single-product div.product p.price,
.single-product div.product .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 20px;
}
.single-product div.product p.price del {
  color: var(--ink-soft);
  font-weight: 400;
}

/* Rövid leírás (pd-desc) */
.single-product div.product .woocommerce-product-details__short-description {
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 22px;
}

/* Galéria keret (demó gallery-main: paper-alt háttér, keret) */
.single-product div.product .woocommerce-product-gallery {
  background: var(--paper-alt);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 24px;
}

/* SKU / kategória meta – monospace (pd-tag hangulat) */
.single-product .product_meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .03em;
}

/* Mennyiség léptető (qty-stepper) */
.single-product .quantity input.qty {
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px;
}

/* Fő CTA gomb (demó .btn-full – narancs, hangsúlyos) */
.single-product div.product form.cart .single_add_to_cart_button {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  padding: 14px 30px;
}
.single-product div.product form.cart .single_add_to_cart_button:hover {
  background: var(--orange-dark);
}

/* Fülek (WooCommerce tabs) – demó tipográfia */
.woocommerce-tabs ul.tabs li {
  border-radius: var(--radius) var(--radius) 0 0;
}
.woocommerce-tabs ul.tabs li a {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink-soft);
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--navy);
}
.woocommerce-tabs .panel,
.woocommerce-tabs .panel h2 {
  font-family: var(--font-body);
}
.woocommerce-tabs .panel h2 {
  font-family: var(--font-display);
  color: var(--navy);
}
/* Specifikációs / attribútum-táblázat monospace (demó spec-table) */
.woocommerce-product-attributes,
.shop_attributes {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Kapcsolódó termékek fejléc (a kártyák a rács-stílust öröklik) */
.related.products > h2,
.upsells.products > h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: 22px;
  border-top: 1px solid var(--mist);
  padding-top: 40px;
  margin-top: 20px;
}

/* ==========================================================================
   Attribútum-választók (chip-ek) – a demó .chip stílusa
   A variations.js a WooCommerce <select> legördülőit ilyen chip-ekké alakítja.
   ========================================================================== */
.variations th.label label {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.kiss-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
.kiss-chip {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--mist);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
  transition: border-color .12s ease, background .12s ease;
}
.kiss-chip:hover {
  border-color: var(--navy);
}
.kiss-chip.is-selected {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Színes swatch-ek (kör alakú, tényleges színnel/képpel) – ha a Termékek →
   Attribútumok → [szín-attribútum] → Kifejezések alatt be van állítva a
   szín/kép, a variations.js ezt rajzolja ki szöveges chip helyett. A szín-
   és kép-swatch-ek egységes alakúak és méretűek. Az első 5 érték jelenik
   meg, a többi a "…" gombra kattintva nyílik le (kb. 3+2-es, két soros
   elrendezés).
   A kör alak szándékos: egyenes, egymással párhuzamos/keresztező élek
   (pl. lekerekített téglalapok szoros rácsban) "scintillating grid"
   hatást keltenek (áltatólag sötétedő metszőpontok a perifériás
   látásban) – körnek nincs egyenes éle, így nem alkothat ilyen
   metszőpontot, ez geometriailag kizárja a jelenséget. */
.kiss-chip-row--color {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-content: start;
  gap: 24px;
}
@media (max-width: 480px) {
  .kiss-chip-row--color {
    grid-template-columns: repeat(2, max-content);
  }
}
.kiss-chip--extra {
  display: none;
}
.kiss-chip-row--color.is-expanded .kiss-chip--extra {
  display: inline-flex;
}
.kiss-chip-color,
.kiss-chip-image {
  min-width: 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 6px rgba(35, 42, 47, 0.16);
  background-size: cover;
  background-position: center;
  position: relative;
}
.kiss-chip-color:hover,
.kiss-chip-image:hover {
  box-shadow: 0 2px 8px rgba(35, 42, 47, 0.16), 0 0 0 2px var(--navy);
}
.kiss-chip-color.is-selected,
.kiss-chip-image.is-selected {
  box-shadow: 0 2px 8px rgba(35, 42, 47, 0.16), 0 0 0 2px var(--orange);
}
/* "…" gomb, ami lenyitja a rejtett (5. helyen túli) swatch-eket – ez csak
   egyetlen elem soronként, nem vesz részt az ismétlődő rács-mintában, így
   kaphat éles (szaggatott) szegélyt. */
.kiss-chip-toggle {
  border: 1px dashed rgba(35, 42, 47, 0.35);
  box-shadow: none;
  background: #fff;
}
.kiss-chip-toggle:hover {
  border-color: var(--navy);
  box-shadow: none;
}
.kiss-chip-toggle-label {
  font-size: 14px;
  line-height: 1;
  color: var(--ink-soft);
}
/* A felirat a képernyőolvasóknak megmarad, vizuálisan rejtett */
.kiss-chip-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Ajánlatkérő / pénztár oldal (a demó quote-form hangulata)
   ========================================================================== */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
}
.woocommerce form .form-row label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--font-body);
}
/* Fő gomb: "Ajánlatkérés elküldése" – narancs, teljes szélesség */
#place_order,
.woocommerce #payment #place_order {
  background: var(--orange);
  color: #fff;
  width: 100%;
  padding: 15px;
  font-size: 14.5px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
}
#place_order:hover,
.woocommerce #payment #place_order:hover {
  background: var(--orange-dark);
}
/* "Tovább az ajánlatkéréshez" gomb a kosárban */
.woocommerce a.checkout-button,
.woocommerce-cart a.checkout-button {
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
}
.woocommerce a.checkout-button:hover {
  background: var(--orange-dark);
}
/* Marketing hozzájárulás checkbox */
.kiss-consent {
  margin: 12px 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
}
/* Kupon mező elrejtése az ajánlatkérőnél (nem releváns) */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon,
.woocommerce-cart .coupon {
  display: none;
}

/* "+ ÁFA" utótag az áraknál – kisebb, halvány */
.kiss-vat {
  font-size: 0.72em;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
  white-space: nowrap;
}

/* A "megtekintés/Ajánlatkérő" (added_to_cart) link a paletta narancsával */
.woocommerce ul.products li.product a.added_to_cart {
  display: inline-block;
  margin: 8px 16px 0;
  padding: 8px 14px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13px;
}
.woocommerce ul.products li.product a.added_to_cart:hover {
  background: var(--orange-dark);
  color: #fff;
}

/* ==========================================================================
   Bolt / kategória oldal: kétoszlopos elrendezés bal oldali kategória-fával
   (a demó "fastruktúrás" kategória-blokkja). A jobb oldali sáv globálisan
   ki van kapcsolva, így a tartalom [fa | termékek] elrendezésű.
   ========================================================================== */
.kiss-shop-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.kiss-shop-aside {
  flex: 0 0 262px;
  max-width: 262px;
}
.kiss-shop-main {
  flex: 1 1 auto;
  min-width: 0; /* hogy a termékrács tudjon zsugorodni, ne lógjon ki */
}
@media (max-width: 768px) {
  .kiss-shop-layout {
    display: block;
  }
  .kiss-shop-aside {
    max-width: none;
    margin-bottom: 24px;
  }
}

/* ---- A fa doboza ---- */
.kiss-cat-tree {
  border: 1px solid var(--mist);
  border-radius: 12px;
  background: var(--white);
  padding: 12px 10px;
}
.kiss-cat-tree__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 8px 10px;
}
.kiss-cat-tree__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Beágyazott szintek alapból csukva; nyitáskor jelennek meg. */
.kiss-cat-tree__item > .kiss-cat-tree__list {
  display: none;
  padding-left: 16px;
  margin-top: 2px;
}
.kiss-cat-tree__item.is-open > .kiss-cat-tree__list {
  display: block;
}

/* ---- Egy sor (nyíl + link) ---- */
.kiss-cat-tree__row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
}
.kiss-cat-tree__row:hover {
  background: var(--paper);
}
.kiss-cat-tree__item.is-current > .kiss-cat-tree__row {
  background: var(--orange);
}
.kiss-cat-tree__item.is-current > .kiss-cat-tree__row:hover {
  background: var(--orange);
}

/* Nyitó/csukó gomb – chevron (kis "L" elforgatva). */
.kiss-cat-tree__toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kiss-cat-tree__toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); /* jobbra mutat = csukva */
  transition: transform .15s ease;
}
.kiss-cat-tree__item.is-open > .kiss-cat-tree__row .kiss-cat-tree__toggle::before {
  transform: rotate(45deg); /* lefelé mutat = nyitva */
}
/* Levélelemeknél (nincs gyerek) csak térkitöltő, hogy a linkek egy vonalban legyenek. */
.kiss-cat-tree__spacer {
  flex: 0 0 auto;
  width: 26px;
  height: 34px;
}

/* ---- A kategória-link ---- */
.kiss-cat-tree__link {
  flex: 1 1 auto;
  padding: 8px 8px;
  color: var(--ink);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.3;
  text-decoration: none;
}
.kiss-cat-tree__link:hover {
  color: var(--navy);
}
.kiss-cat-tree__item.is-current > .kiss-cat-tree__row .kiss-cat-tree__toggle,
.kiss-cat-tree__item.is-current > .kiss-cat-tree__row .kiss-cat-tree__link {
  color: #fff;
}