/* =========================================
   KRIMBO – SABLON CSS (TIPÓ + SPACING)
   Gombok/ikonok stílus nélkül
   ========================================= */

/* ===== FONT BETÖLTÉS ===== */
@font-face {
  font-family: 'HelveticaNeueLT Pro 57 Cn';
  src: url('https://www.kolbaszorszag.hu/custom/kolbaszorszag/image/data/media/fonts/HelveticaNeueLTPro57Cn.woff2') format('woff2'),
       url('https://www.kolbaszorszag.hu/custom/kolbaszorszag/image/data/media/fonts/HelveticaNeueLTPro57Cn.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HelveticaNeueLT Pro 57 Cn';
  src: url('https://www.kolbaszorszag.hu/custom/kolbaszorszag/image/data/media/fonts/HelveticaNeueLTPro67MdCn.woff2') format('woff2'),
       url('https://www.kolbaszorszag.hu/custom/kolbaszorszag/image/data/media/fonts/HelveticaNeueLTPro67MdCn.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== GLOBÁLIS BETŰTÍPUS ===== */
* {
  font-family: "HelveticaNeueLT Pro 57 Cn", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* ===== ALAP TIPÓ ===== */
html {
  font-size: 16px !important;
}

body {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  letter-spacing: 0.01em;
  color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, li, a, span, label {
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

/* ===== CÍMSOR HIERARCHIA ===== */
h1 {
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-bottom: 0.6em !important;
}

h2 {
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin-bottom: 0.6em !important;
}

h3 {
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

h4, h5, h6 {
  font-size: 1.1rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* ===== MENÜ (méret + elválasztó) ===== */
header,
nav,
.menu,
.navbar,
.main-navigation {
  font-size: 0.95rem !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* ===== MENÜ ÉS TARTALOM KÖZT TÉRKÖZ ===== */
header + *,
.site-header + *,
#header + * {
  margin-top: 30px !important;
}

/* ===== HERO/SLIDER NE CSÚSSZON FEL A MENÜ ALÁ ===== */
.slider,
.hero,
.banner,
[class*="slider"],
[class*="hero"],
[class*="banner"] {
  margin-top: 30px !important;
  top: auto !important;
}

/* ===== FŐ TARTALOM LEVEGŐ ===== */
main,
#content,
.site-content,
.page-content {
  padding-top: 14px !important;
}

/* ===== MENÜ HOVER (finom aláhúzás) ===== */
nav a,
.menu a,
.navbar a {
  position: relative;
  transition: all 0.3s ease;
}

nav a::after,
.menu a::after,
.navbar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: #111;
  transition: width 0.3s ease;
}

nav a:hover::after,
.menu a:hover::after,
.navbar a:hover::after {
  width: 100%;
}

/* ===== ÁRMEGJELENÍTÉS ===== */
.price,
.product-price,
.amount {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
}

.price del,
.old-price {
  font-size: 0.9rem !important;
  color: rgba(0,0,0,0.5) !important;
  text-decoration: line-through;
}

/* ===== KATEGÓRIA / OLDAL CÍM (magazin alávonal) ===== */
.category-title,
.page-title,
h1 {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.category-title::after,
.page-title::after,
h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: #111;
}

/* ===== TERMÉKKÁRTYÁK ===== */
.product,
.product-card,
.product-list-item,
.products .item,
.products .product-item {
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: 18px !important;
  overflow: hidden;
  background: #fff !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product:hover,
.product-card:hover,
.product-list-item:hover,
.products .item:hover,
.products .product-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

.product img,
.product-card img,
.products img {
  transition: transform 0.35s ease;
}

.product:hover img,
.product-card:hover img,
.products .item:hover img,
.products .product-item:hover img {
  transform: scale(1.03);
}

/* ===== KOSÁR / CHECKOUT DOBOZOK (csak layout, nem gomb) ===== */
.cart,
.checkout,
.cart-content,
.checkout-content,
.order-summary,
.summary {
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 18px !important;
  background: #fff !important;
}

.cart table td,
.cart table th,
.checkout table td,
checkout table th {
  padding: 14px 12px !important;
}

/* ===== TERMÉKOLDAL: több térköz a fejléc alatt ===== */
.product-page,
.product-detail,
.product-view,
.product-container,
.product-content,
.product-wrapper,
#product {
  margin-top: 32px !important;
}

/* ===== FOOTER ===== */
footer,
.site-footer,
#footer {
  margin-top: 40px !important;
  padding: 34px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  background: #fff !important;
}

footer a,
.site-footer a,
#footer a {
  text-decoration: none !important;
  opacity: 0.9;
}

footer a:hover,
.site-footer a:hover,
#footer a:hover {
  opacity: 1;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* ===== MOBIL FINOMHANGOLÁS ===== */
@media (max-width: 767px) {

  h1, .page-title, .category-title {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
  }

  h2 { font-size: 1.25rem !important; line-height: 1.2 !important; }
  h3 { font-size: 1.12rem !important; line-height: 1.25 !important; }

  body, p, li, a, span, label {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
  }

  main, #content, .page-content, .site-content, .content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  h1::after, .page-title::after, .category-title::after {
    width: 44px !important;
  }

  .product:hover,
  .product-card:hover,
  .product-list-item:hover,
  .products .item:hover,
  .products .product-item:hover {
    transform: none;
    box-shadow: 0 10px 18px rgba(0,0,0,0.08);
  }
}