/* ==========================================================================
   Dekorator arculati alapreteg (Storefront fole)
   Forras: a jovahagyott GI5000 meret-matrix makett token-rendszere.
   ========================================================================== */

:root {
  --dek-ink: #14191F;
  --dek-ink-soft: #2A2F37;
  --dek-paper: #F5F5F1;
  --dek-paper-raised: #FFFFFF;
  --dek-well: #FAFAF7;
  --dek-slate: #545353;
  --dek-slate-soft: #7A7876;
  --dek-line: rgba(20, 25, 31, 0.12);
  --dek-line-strong: rgba(20, 25, 31, 0.22);
  --dek-accent: #D0FC54;      /* CSAK kitoltes - szovegkent sosem hasznaljuk */
  --dek-accent-ink: #1B2A0E;  /* szoveg az akcent-hatteren */
  --dek-stock-ok: #2F6F4E;
  --dek-stock-ok-bg: #E4F0E9;
  --dek-stock-out: #8C3B34;
  --dek-stock-out-bg: #F2E4E2;
  --dek-sale: #B5541A;        /* promo (idoszakos akcio) */
  --dek-sale-bg: #F4E7DC;
  --dek-outlet: #9A2F53;      /* outlet (tartos leertekeles) */
  --dek-outlet-bg: #F3E2EA;
  /* Figyelemfelkelto sarga - a melirozott/cirmos szinek ELTERO
     anyagosszetetelehez. Szandekosan sargas, hogy ne lehessen osszekeverni
     sem a promo (narancs), sem az outlet (magenta) jelolessel. */
  --dek-alert: #7A4E00;
  --dek-alert-bg: #FFEDBC;
  --dek-alert-line: #D9A21A;

  --dek-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dek-font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* Fuggoleges gorgetosav-hely MINDIG legyen fenntartva.
   Janos eszrevetele: kategoriavaltaskor "beremeg" az egesz oldal. Az ok: a
   rovid (pl. 6 termekes) kategoria elfer gorgetes nelkul, a hosszabb nem -
   igy a bongeszo gorgetosavja hol megjelenik, hol eltunik, es a tartalom
   szelessege ~15px-et ugrik minden oldalvaltasnal. A "stable" fenntartja a
   savot akkor is, ha epp nincs mit gorgetni, igy a szelesseg allando marad.
   Ez az EGESZ oldalra vonatkozik, nem csak a katalogusra - ezert van itt es
   nem a catalog.css-ben. */
html {
  scrollbar-gutter: stable;
}

/* ---- alap tipografia (a makett betukeszlete, nem a Storefront Source Sans-e) ---- */
body,
button,
input,
select,
textarea,
.widget,
.site-header,
.site-footer,
p, li, td, th, label {
  font-family: var(--dek-font-body);
}
body {
  background: var(--dek-paper);
  color: var(--dek-ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.product_title,
.dek-serif {
  font-family: var(--dek-font-display);
  font-weight: 500;
  color: var(--dek-ink);
  letter-spacing: 0;
  text-transform: none;
}
.product_title {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 14px;
}

/* ---- szelesebb tartalom-sav (a meret-matrixnak kell a hely) ---- */
.col-full {
  max-width: 1440px;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---- oldalsav nelkuli elrendezes a katalogus-oldalakon ---- */
.dek-no-sidebar .content-area {
  width: 100%;
  float: none;
  margin-right: 0;
  margin-left: 0;
}
.dek-no-sidebar .widget-area {
  display: none;
}
/* A termekoldal ket oszlopa (kep | osszefoglalo). FONTOS: a Storefront ezeket
   floattal teszi egymas melle, es sajat margin-right-ot ad a galerianak - ha a
   szelesseg + margo egyutt 100% fole megy, a jobb oszlop LECSUSZIK a kep alja
   melle. Ezert adjuk meg a margot is explicit, pontosan 100%-ra kijove. */
.dek-no-sidebar.single-product div.product .woocommerce-product-gallery {
  width: 42%;
  margin-right: 4%;
}
.dek-no-sidebar.single-product div.product .summary {
  width: 54%;
  margin-right: 0;
  clear: none;
}
@media (max-width: 768px) {
  .dek-no-sidebar.single-product div.product .woocommerce-product-gallery,
  .dek-no-sidebar.single-product div.product .summary {
    width: 100%;
  }
}

/* ---- zero lekerekites mindenen (a makett explicit iranya) ---- */
button,
input,
select,
textarea,
.button,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 0 !important;
}

/* ---- gombok: tinta-alap, akcent csak kiemelt CTA-nak ---- */
.button,
button[type="submit"] {
  background: var(--dek-ink);
  color: var(--dek-paper);
  border: none;
  font-weight: 700;
}
.button:hover,
button[type="submit"]:hover {
  background: var(--dek-ink-soft);
  color: var(--dek-paper);
}
.button.alt,
.single_add_to_cart_button {
  background: var(--dek-accent);
  color: var(--dek-accent-ink);
}
.button.alt:hover,
.single_add_to_cart_button:hover {
  background: #C2EE46;
  color: var(--dek-accent-ink);
}

/* ---- linkek ---- */
a {
  color: var(--dek-ink);
}
a:hover {
  color: var(--dek-ink-soft);
}

/* ---- termekoldal fulek: vizszintes sor a Storefront alapertelmezett
   lebegtetett (nav balra keskenyen, tartalom jobbra) elrendezese helyett.
   A Storefront sajat CSS-e "ul.tabs{float:left}" + ".panel{float:right}"
   parost hasznal - ez a mi szelesebb (1440px) elrendezesunkben feltunoen
   szetcsuszott kinezetet adott (keskeny navigacio balra, nagy ures resz,
   majd a tartalom). ---- */
.woocommerce-tabs ul.tabs {
  float: none !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 26px;
  border-top: none;
  border-bottom: 1px solid var(--dek-line);
  margin: 0 0 26px;
  padding: 0;
}
.woocommerce-tabs ul.tabs li {
  display: block;
  float: none !important;
  width: auto !important;
  margin: 0;
  border: none;
}
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dek-slate);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--dek-ink);
  border-bottom-color: var(--dek-ink);
}
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li::before {
  display: none !important;
  content: none !important;
}
.woocommerce-tabs .panel {
  float: none !important;
  width: 100% !important;
  clear: both;
}

/* ---- UTT termekkep a galeriaban (nincs medias attachment, sajat render) ---- */
.utt-gallery-image {
  border: 1px solid var(--dek-line);
  background: var(--dek-paper-raised);
}
.utt-gallery-image img {
  width: 100%;
  height: auto;
  display: block;
}