/* ============================================================
   SILOTEK — Tebex skin v4 (FIELD MANUAL)
   Inlocuieste CONTINUTUL lui generic.css in theme editor.
   Se incarca dupa shared.css (scheletul) si il imbraca.

   Portat din sistemul de pe silotek.dev (7 aug 2026):
   HARTIE crem cu halftone fin ca fundal peste tot, cerneala
   groasa (chenare 3px), culori PLATE fara gradient, umbra plata
   decalata, un singur accent portocaliu. Verdele de fosfor si
   VT323 traiesc doar in ecrane si in wordmark.

   Fata de v3: fara dot-grid de 18px, fara alb, fara Kontainer.
   ============================================================ */

/* Toate cele patru fonturi sunt pe Google Fonts, deci tema nu mai
   depinde de silotek.dev/fonts/ si de headerul CORS de acolo. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Libre+Franklin:wght@400;800&family=Share+Tech+Mono&family=VT323&display=swap");

/* ---------- tokens: suprascriem variabilele temei ---------- */
:root {
  --color-text: #1a1713;
  --color-text-darker: rgb(26 23 19 / 0.82);
  --color-text-secondary: #4a443b;
  --color-text-dark: #1a1713;
  --color-bg: #efe6d6;
  --color-brighter-bg: #f7f1e6;
  --color-primary: #f07a22;
  --color-primary-hover: #b95410;
  --color-primary-text: #1a1713;
  --color-primary-text-hover: #1a1713;
  --color-secondary: transparent;
  --color-secondary-hover: #1a1713;
  --color-secondary-text: #1a1713;
  --color-secondary-text-hover: #efe6d6;
  --color-tertiary-hover: rgb(26 23 19 / 0.07);
  --color-sale-banner-bg: var(--color-primary);
  --color-sale-banner-text: #1a1713;

  /* tokens proprii */
  --kl-ink: #1a1713;
  --kl-paper: #efe6d6;
  --kl-paper-deep: #e2d6c0;
  --kl-paper-card: #f7f1e6;
  --kl-orange-ink: #b95410;
  --kl-line: rgb(26 23 19 / 0.3);
  --kl-line-soft: rgb(26 23 19 / 0.14);
  --kl-panel: #f7f1e6;
  --kl-good: #1c9e57;
  --kl-rule: 3px solid #1a1713;
  --kl-shadow: 9px 9px 0 rgb(26 23 19 / 0.22);

  /* Anton are o singura grosime si se inchide sub ~24px, deci display
     mic (butoane, titluri de card, nav) trece pe Libre Franklin 800. */
  --kl-font-big: "Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --kl-font-sm: "Libre Franklin", system-ui, "Segoe UI", sans-serif;
  --kl-font-med: "Libre Franklin", system-ui, "Segoe UI", sans-serif;
  --kl-font-vt: "VT323", ui-monospace, "Courier New", monospace;
  --kl-font-mono: "Share Tech Mono", "Courier New", monospace;
}

/* ---------- fundal: HARTIE cu halftone fin (nu dot-grid digital) ---------- */
body {
  font-family: var(--kl-font-med);
  color: var(--kl-ink);
  background-color: var(--kl-paper);
  background-image:
    radial-gradient(circle at 18% 0%, rgb(240 122 34 / 0.11), transparent 58%),
    radial-gradient(circle at 88% 92%, rgb(26 23 19 / 0.07), transparent 45%),
    radial-gradient(circle at 0.7px 0.7px, rgb(26 23 19 / 0.15) 0.7px, transparent 0);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 4px 4px;
}

/* imaginea de fundal din setari (bg-image), daca e setata */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-height: 400px;
  z-index: -1;
  background: var(--bg-image, none) center center/cover no-repeat;
  mask-image: linear-gradient(rgb(26 23 19 / 0.5) 40%, transparent);
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kl-font-big);
  font-weight: 400;
}

::selection {
  color: var(--kl-paper);
  background-color: var(--kl-ink);
}

/* ---------- titlu site: logo + wordmark glitch (ca pe silotek.dev) ----------
   brandul sta sus-stanga, pe aceeasi verticala cu blocul Discord, deasupra lui */
@media (width > 960px) {
  .site-header-inner {
    /* coloana din stanga (dupa consola): brandul si Discord se aliniaza pe ea */
    --kl-discord-x: 495px;
  }

  .site-header-inner .site-title {
    inset: var(--widget-padding) auto auto
      max(0px, calc(var(--kl-discord-x) - var(--content-padding) - (100vw - min(100vw, var(--content-width))) / 2));
    margin: 0;
    line-height: 1;
    text-align: left;
  }

  .site-header-inner .site-title .kl-tagline {
    text-align: left;
  }
}

.site-title .kl-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.kl-brand-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.kl-brand-type {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
  line-height: 1;
}

.kl-wordmark-glitch {
  position: relative;
  display: inline-block;
  font-family: var(--kl-font-vt);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.07em;
  color: var(--kl-ink);
  -webkit-text-stroke: 0.6px var(--kl-ink);
}

.kl-wordmark-glitch::before,
.kl-wordmark-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-text-stroke-width: 0.6px;
}

.kl-wordmark-glitch::before {
  color: #ea2fb0;
  transform: translate(1.5px, -1px);
  clip-path: inset(10% 0 62% 0);
  animation: kl-glitch-a 3.4s infinite steps(1);
}

.kl-wordmark-glitch::after {
  color: #1fd4e8;
  transform: translate(-1.5px, 1px);
  clip-path: inset(60% 0 8% 0);
  animation: kl-glitch-b 2.9s infinite steps(1);
}

@keyframes kl-glitch-a {
  0%, 91%, 100% { opacity: 0; }
  92% { opacity: 0.85; clip-path: inset(6% 0 68% 0); transform: translate(2px, -2px); }
  94% { opacity: 0.6; clip-path: inset(38% 0 32% 0); transform: translate(-2px, 1px); }
  96% { opacity: 0; }
}

@keyframes kl-glitch-b {
  0%, 87%, 100% { opacity: 0; }
  88% { opacity: 0.75; clip-path: inset(64% 0 6% 0); transform: translate(-3px, 2px); }
  90% { opacity: 0.5; clip-path: inset(20% 0 56% 0); transform: translate(2px, -1px); }
  93% { opacity: 0; }
}

.kl-wordmark-cursor {
  font-family: var(--kl-font-vt);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: var(--kl-ink);
  -webkit-text-stroke: 0.6px var(--kl-ink);
  animation: kl-cursor-blink 1.05s steps(1) infinite;
}

@keyframes kl-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* tagline sub wordmark */
.kl-tagline {
  display: block;
  margin-top: 5px;
  font-family: var(--kl-font-vt);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  text-align: center;
  color: rgb(26 23 19 / 0.5);
}

@media (width <= 960px) {
  .kl-brand-logo {
    width: 44px;
    height: 44px;
  }

  .kl-wordmark-glitch,
  .kl-wordmark-cursor {
    font-size: 40px;
  }

  .kl-tagline {
    font-size: 15px;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kl-wordmark-glitch::before,
  .kl-wordmark-glitch::after,
  .kl-wordmark-cursor {
    animation: none;
  }
}

/* ---------- header: social links (Discord stanga, YouTube | Website dreapta) ---------- */
.site-header-inner .kl-social {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--kl-ink);
  transition: color 0.15s ease-in-out;
}

.site-header-inner .kl-social:hover {
  color: var(--kl-orange-ink);
}

.kl-icon {
  width: 26px;
  height: 26px;
  flex: none;
}

.kl-icon-mini {
  width: 19px;
  height: 19px;
}

.site-header-inner .info.kl-social-discord {
  padding: 0;
  width: auto;
  max-width: none;
}

.kl-social-label .title {
  display: block;
  font-family: var(--kl-font-med);
  font-size: 15px;
  line-height: 1.2;
  color: currentColor;
}

.kl-social-label .action {
  display: block;
  font-family: var(--kl-font-mono);
  font-size: 12px;
  color: currentColor;
  opacity: 0.55;
}

.site-header-inner .info.kl-social-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
  width: auto;
  max-width: none;
  text-align: left;
}

.kl-social-mini {
  font-family: var(--kl-font-med);
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
}

.kl-social-sep {
  font-family: var(--kl-font-vt);
  font-size: 22px;
  line-height: 1;
  color: rgb(26 23 19 / 0.28);
}

/* ---------- "desert line": linie neagra subtire (sub logo + meniu centrat),
   cactusi pixel-art pe mijloc si mascota calare care galopeaza pe linie ---------- */
.navigation-horizontal > ul {
  justify-content: center;
}

.kl-divider {
  position: relative;
  height: 122px;
  margin-top: var(--widget-padding);
  margin-bottom: var(--widget-padding);
  background: transparent;
  /* overflow ramane vizibil ca imaginea cu consola sa poata urca peste header;
     doar banda calaretului (.kl-track) clipuieste */
  overflow: visible;
  /* full-bleed: linia merge din marginea stanga pana in dreapta ecranului,
     iesind din containerul cu max-width al header-ului */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* mascota la consola: biroul sta pe linia neagra, tevile ies prin topul paginii */
/* stanga: scena cu cele 3 mascote la aparatura retro (rightside.png),
   asezata pe linie; sub coloana brand+Discord, fara sa o atinga */
.kl-console {
  position: absolute;
  bottom: 3px;
  left: 0;
  /* inaltimea completa a hero-ului (linia -> topul paginii), ca la centerimage */
  height: 498px;
  width: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

@media (width <= 960px) {
  .kl-console {
    display: none;
  }
}

/* cand imaginea e vizibila, mutam blocul Discord la dreapta ei.
   --kl-discord-x = pozitia dorita in viewport (marginea dreapta a imaginii + spatiu);
   scadem paddingul si marginea de centrare ca sa obtinem `left` in header-inner */
@media (width > 1200px) {
  .site-header-inner .info.kl-social-discord {
    left: max(0px, calc(var(--kl-discord-x) - var(--content-padding) - (100vw - min(100vw, var(--content-width))) / 2));
  }
}


@media (width > 1600px) {
  .site-header-inner {
    --kl-discord-x: 605px;
  }
}

/* linia pe care alearga calaretul */
.kl-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--kl-ink);
}

/* centru: mascotele care inspecteaza logoul RedM, pe linie
   (56% = centru optic, lasa loc blocului Discord in stanga) */
.kl-inspect {
  position: absolute;
  bottom: 3px;
  /* centrat 100%; pe ecrane inguste se muta la dreapta doar cat sa nu
     acopere blocul Discord (centrul imaginii nu coboara sub 848px) */
  left: max(50%, 848px);
  transform: translateX(-50%);
  /* inaltimea hero-ului: header-inner 355 + margine 24 + divider 122 - linia 3
     -> cablurile ating exact topul paginii, mascotele stau pe linie */
  height: 498px;
  width: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

@media (width <= 1400px) {
  .kl-inspect {
    display: none;
  }
}

/* dreapta: turma de mascote curioase, pe linie, privind spre centru
   (230px -> mascotele au aceeasi inaltime cu inspectorii din centru) */
.kl-crowd {
  position: absolute;
  bottom: 3px;
  right: 0;
  /* inaltimea completa a hero-ului (linia -> topul paginii) */
  height: 498px;
  width: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

@media (width <= 1450px) {
  .kl-crowd {
    display: none;
  }
}

@media (width <= 960px) {
  .kl-divider {
    height: 64px;
  }
}

/* ---------- header (restul) ---------- */
.site-header-inner .info .title {
  font-family: var(--kl-font-med);
}

.site-header-inner .info .action {
  font-family: var(--kl-font-mono);
  font-size: 13px;
}

.site-sale-banner {
  font-family: var(--kl-font-big);
  font-size: 17px;
  border: 1px solid rgb(26 23 19 / 0.12);
}

/* ---------- navigatie: VT323, uppercase, hover portocaliu inchis ---------- */
.site-navigation .menu > li > a {
  font-family: var(--kl-font-vt);
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-navigation a {
  transition: color 0.15s ease-in-out;
}

.site-navigation a:hover,
.site-navigation .link-active {
  color: var(--kl-orange-ink);
}

@media (width > 960px) {
  .navigation-horizontal > ul {
    border: 1px solid rgb(26 23 19 / 0.1);
    background: rgb(239 230 214 / 0.85);
    backdrop-filter: blur(14px);
  }

  .navigation-horizontal .has-children > ul {
    border: 2px solid var(--kl-line);
    background: var(--kl-paper-card);
    box-shadow: 8px 8px 0 rgb(26 23 19 / 0.1);
  }
}

/* nav vertical (widget in sidebar): bara neagra pe itemul activ */
.widget.site-navigation .menu > li {
  position: relative;
}

.widget.site-navigation .menu > li.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 calc(var(--widget-padding) * -1);
  width: 3px;
  background: var(--kl-ink);
}

/* ---------- butoane: umbra ANCORATA, butonul se scufunda in ea ----------
   Deplasarea si scurtarea umbrei sunt egale (prin calc), deci muchia
   exterioara nu se misca — senzatie de apasat, nu de alunecat. */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  --sh: var(--color-primary);
  --sh-x: 5px;
  --press: 3px;
  border-radius: 0;
  border: var(--kl-rule);
  font-family: var(--kl-font-sm);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  box-shadow: var(--sh-x) var(--sh-x) 0 var(--sh);
  transition: transform 0.07s ease-out, box-shadow 0.07s ease-out;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-tertiary:hover,
.btn-primary:focus,
.btn-secondary:focus,
.btn-tertiary:focus {
  transform: translate(var(--press), var(--press));
  box-shadow: calc(var(--sh-x) - var(--press)) calc(var(--sh-x) - var(--press)) 0 var(--sh);
}

.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active {
  transform: translate(var(--sh-x), var(--sh-x));
  box-shadow: 0 0 0 var(--sh);
}

/* primary = placa de cerneala */
.btn-primary {
  --btn-color-bg: var(--kl-ink);
  --btn-color-text: var(--kl-paper);
  --btn-color-bg-hover: var(--kl-ink);
  --btn-color-text-hover: var(--kl-paper);
}

/* secondary = fantoma pe hartie, umbra estompata */
.btn-secondary,
.btn-tertiary {
  --sh: rgb(26 23 19 / 0.2);
  --btn-color-bg: transparent;
  --btn-color-text: var(--kl-ink);
  --btn-color-bg-hover: transparent;
  --btn-color-text-hover: var(--kl-ink);
}

.quantity-field {
  border: var(--kl-rule);
  border-radius: 0;
  background: var(--kl-paper-card);
}

.quantity-field input[type=number] {
  font-family: var(--kl-font-mono);
}

/* ---------- categorii pe homepage: carduri albe cu bara neagra ---------- */
/* pregatite pentru imaginile cu mascota: imaginea e vedeta, textul sub ea */
.site-home-categories .category {
  position: relative;
  padding: 20px var(--widget-padding);
  border: var(--kl-rule);
  background: var(--kl-paper-card);
  font-family: var(--kl-font-sm);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  box-shadow: var(--kl-shadow);
  transition:
    color 0.15s ease-in-out,
    transform 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* dunga portocalie de stencil, ca eticheta de placa din manual */
.site-home-categories .category::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--color-primary);
  border-right: var(--kl-rule);
}

.site-home-categories .category:hover {
  color: var(--kl-orange-ink);
  transform: translate(3px, 3px);
  box-shadow: 6px 6px 0 rgb(26 23 19 / 0.22);
}

/* ---------- panouri de continut ---------- */
.store-text,
.category-description,
.no-products,
.store-product-full,
.store-category-tiered {
  border: var(--kl-rule);
  background: var(--kl-panel);
  box-shadow: var(--kl-shadow);
}

.no-products {
  color: var(--color-text-secondary);
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

/* ---------- carduri de produs ---------- */
.store-products-list .store-product,
.store-products-images .store-product {
  border: var(--kl-rule);
  background: var(--kl-paper-card);
  box-shadow: var(--kl-shadow);
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  transform: translate(3px, 3px);
  box-shadow: 6px 6px 0 rgb(26 23 19 / 0.22);
}

.store-products-images .store-product {
  text-align: center;
}

/* numele produsului e display mic → Franklin 800, nu Anton */
.store-product .product-title {
  font-family: var(--kl-font-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.store-product .product-title a:hover {
  color: var(--kl-orange-ink);
}

.store-product .price {
  font-family: var(--kl-font-mono);
}

.store-product .price .discount {
  color: rgb(26 23 19 / 0.4);
}

.store-product .image,
.store-product .image-default {
  border: 2px solid var(--kl-ink);
}

/* placeholder: hasura de 45 grade, ca panourile de pe silotek.dev */
.store-product .image-default {
  background:
    repeating-linear-gradient(45deg, rgb(26 23 19 / 0.06) 0 11px, transparent 11px 22px),
    var(--kl-paper-deep);
}

.store-product .countdown {
  font-family: var(--kl-font-mono);
  color: var(--kl-orange-ink);
}

/* pachete tiered */
.store-product-tiered {
  border: 2px solid var(--kl-line);
  background: var(--kl-paper-card);
}

.store-product-tiered.subscribed {
  border-color: var(--kl-good);
}

/* ---------- widget-uri sidebar ---------- */
.widget {
  border: var(--kl-rule);
  background: var(--kl-panel);
  box-shadow: var(--kl-shadow);
}

.widget-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--kl-line-soft);
  color: rgb(26 23 19 / 0.4);
  font-family: var(--kl-font-vt);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.widget-top-donator .avatar {
  border-radius: 0;
  border: 2px solid var(--kl-line);
}

.widget-recent .avatar {
  border-radius: 0;
}

.widget-recent time {
  font-family: var(--kl-font-mono);
  font-size: 11px;
  color: rgb(26 23 19 / 0.42);
}

.widget-goal .progress,
.widget-community-goal .progress {
  border: 2px solid var(--kl-line);
  background: #eef0f4;
}

.widget-goal .progress-bar,
.widget-community-goal .progress-bar {
  background: var(--color-primary);
}

.widget-server-status h6 {
  color: var(--kl-good);
  font-family: var(--kl-font-mono);
  font-weight: 400;
}

.widget-gift-card .gift-card-input {
  border: 1px solid rgb(26 23 19 / 0.18);
  background: var(--kl-paper-card);
  font-family: var(--kl-font-mono);
}

/* ---------- basket / checkout ---------- */
.basket .basket-title,
.basket .basket-checkout h3 {
  font-family: var(--kl-font-big);
}

.basket .basket-second-header .total,
.basket .basket-checkout .total,
.basket .basket-item .price {
  font-family: var(--kl-font-mono);
}

.basket-item {
  border: 1px solid var(--kl-line-soft);
  background: var(--kl-paper-card);
}

.basket-item .quantity {
  font-family: var(--kl-font-mono);
}

.basket-popup-content {
  border-left: 1px solid var(--kl-line);
}

/* ---------- popup-uri / toast ---------- */
.popup-content {
  border: 2px solid var(--kl-line);
  background-color: var(--kl-paper-card);
}

.popup-close:hover {
  color: var(--kl-orange-ink);
}

.toast {
  border: 2px solid var(--kl-line);
  border-radius: 0;
  background: var(--kl-paper-card);
  color: var(--kl-ink);
  font-family: var(--kl-font-med);
  box-shadow: 8px 8px 0 rgb(26 23 19 / 0.12);
}

.toast.toast-success {
  border-color: rgb(28 158 87 / 0.55);
}

.toast.toast-error {
  border-color: rgb(224 72 72 / 0.55);
}

/* ---------- formulare ---------- */
.store-form input[type=text],
.store-form input[type=number],
.store-form input[type=email],
.store-form textarea,
.store-form select {
  border: 1px solid rgb(26 23 19 / 0.18);
  background: var(--kl-paper-card);
  color: var(--color-text);
  font-family: var(--kl-font-mono);
}

.store-form input:focus,
.store-form textarea:focus {
  border-color: var(--kl-ink);
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid rgb(26 23 19 / 0.1);
  background: rgb(239 230 214 / 0.85);
}

.site-footer-inner .copyright {
  color: rgb(26 23 19 / 0.42);
  font-size: 12px;
}

/* logo-urile de plata sunt albe (facute pentru fundal inchis) — le punem pe chip dark */
.site-footer-inner .we-accept li {
  background: #101216;
  border: 1px solid rgb(26 23 19 / 0.2);
  padding: 5px 9px;
}

.site-footer-inner .we-accept img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.site-footer-inner .we-accept li:hover img {
  filter: none;
  opacity: 1;
}

/* ---------- linkuri in continut ---------- */
/* Fara asta un <a> din pagina About, dintr-o descriere de pachet sau de
   categorie iese identic cu textul din jur: aceeasi cerneala, fara subliniere.
   E clickabil, dar nimeni nu-si da seama. Verificat in pagina live. */
.text-content a,
.store-text a,
.descr a,
.category-description a {
  color: var(--kl-orange-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  transition: background-color 0.12s, color 0.12s;
}

/* hover: se umple, ca un marker peste cuvant — acelasi limbaj cu butoanele */
.text-content a:hover,
.store-text a:hover,
.descr a:hover,
.category-description a:hover {
  color: var(--kl-paper);
  background: var(--kl-orange-ink);
  text-decoration-color: transparent;
  box-shadow: 0 0 0 2px var(--kl-orange-ink);
}

/* titlurile de sectiune din paginile CMS si din descrieri */
.text-content h3,
.store-text h3,
.descr h3 {
  font-family: var(--kl-font-big);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}