/* Gépen is a telefonos világos tartalom (termékoldalon és a tervező oldalon): sötét fejléc, alatta világos kártyán a tervező, bézs kijelölt gombok */
@media (min-width: 1200px) {
  .sfmc > .sfmc__grid {
    --sfmc-text: #202329;
    --sfmc-muted: #4a5361;
    --sfmc-line: #c8ced7;
    --sfmc-line-soft: #dde1e7;
    --sfmc-panel-2: #fff;
    --sfmc-green: #216b37;
    margin: 0 16px 16px;
    border-radius: 8px;
    background: #f4f5f7;
    color: var(--sfmc-text);
    color-scheme: light;
  }
  .sfmc > .sfmc__header { border-bottom: 0; }
  .sfmc .sfmc__grid :is(.sfmc__label, .sfmc__row-title strong, .sfmc__metrics strong, .sfmc__visual-heading h3, .sfmc__materials-heading h3, .sfmc__material-name strong, .sfmc__material-price strong, .sfmc__total span, .sfmc__total strong) { color: var(--sfmc-text); }
  .sfmc .sfmc__grid :is(.sfmc__field, .sfmc__orientation, .sfmc__stepper, .sfmc__total, .sfmc__rows) { background: #fff; }
  .sfmc .sfmc__grid .sfmc__field input { color: var(--sfmc-text) !important; -webkit-text-fill-color: var(--sfmc-text); }
  .sfmc .sfmc__grid .sfmc__segments button,
  .sfmc .sfmc__grid .sfmc__orientation button,
  .sfmc .sfmc__grid .sfmc__stepper :is(button, output),
  .sfmc .sfmc__grid .sfmc__add-row { color: var(--sfmc-text); }
  .sfmc .sfmc__grid .sfmc__segments button:not(.is-active) { background: #fff; border-color: var(--sfmc-line); }
  .sfmc .sfmc__grid .sfmc__segments button:not(.is-active):hover { background: #e9edf2 !important; color: var(--sfmc-text) !important; }
  .sfmc .sfmc__grid .sfmc__orientation button:not(.is-active):hover,
  .sfmc .sfmc__grid .sfmc__stepper button:hover { background: #e9edf2; color: var(--sfmc-text); }
  /* A gombszínek a telefonos lépésekéi: halvány bézs kijelölés, átlátszó +, szürke inaktív tájolás */
  .sfmc .sfmc__grid .sfmc__segments button.is-active,
  .sfmc .sfmc__grid .sfmc__segments button.is-active:hover { background: var(--sfmc-yellow-soft); border-color: #8a6500; color: var(--sfmc-text); }
  .sfmc .sfmc__grid .sfmc__stepper button:last-child { background: transparent; color: var(--sfmc-text); }
  .sfmc .sfmc__grid .sfmc__orientation button:not(.is-active) { color: var(--sfmc-muted); }
  .sfmc .sfmc__grid .sfmc__add-row { border-color: #929ba8; background: transparent; }
  .sfmc .sfmc__grid .sfmc__add-row:is(:hover, :focus) { color: #111; background: #e9edf2; }
  .sfmc .sfmc__grid .sfmc__remove { color: #555f6d; }
  .sfmc .sfmc__grid .sfmc__remove:hover { color: #111; background: #e9edf2; }
  .sfmc .sfmc__grid .sfmc__layer-toggles label:not(:has(input:checked)) { border-color: var(--sfmc-line); background: #fff; color: var(--sfmc-text); }
  /* Fehér alapon a 12 px-es, vékony réteg-feliratok gyengén látszanak: nagyobb, vastagabb betű és erősebb keret */
  .sfmc .sfmc__grid .sfmc__layer-toggles label { min-height: 38px; padding: 7px 12px; font-size: 13px; font-weight: 650; color: var(--sfmc-text); }
  .sfmc .sfmc__grid .sfmc__layer-toggles label:not(:has(input:checked)) { border-color: #929ba8; }
  .sfmc .sfmc__grid .sfmc__layer-toggles input { width: 16px; height: 16px; accent-color: #8a6500; }
  /* Fehér alapon a 11-12 px-es kiegészítő feliratok nehezen olvashatók: legalább 13 px */
  .sfmc .sfmc__grid :is(.sfmc__row-title small, .sfmc__orientation button, .sfmc__field > span, .sfmc__visual-heading span, .sfmc__metrics span, .sfmc__materials-heading span, .sfmc__rail-legend) { font-size: 13px; }
  .sfmc .sfmc__grid .sfmc__orientation button { font-weight: 650; }
  .sfmc .sfmc__grid .sfmc__metrics > div { border-color: var(--sfmc-line); background: #fff; }
  .sfmc .sfmc__grid .sfmc__status.is-error { color: #b42318; }
  .sfmc .sfmc__grid button:focus-visible { outline-color: #8a6500; }
  .sfmc .sfmc__grid .sfmc__material-name strong > a.sfmc__material-link:focus-visible { outline-color: #8a6500 !important; }
}

/* Három tetőtípus (cserép, hódfarkú cserép, trapéz) egy sorban, minden kijelzőn */
.sfmc [data-sfmc-control="roof"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sfmc .sfmc__segments[data-sfmc-control="roof"] button { padding: 6px !important; white-space: normal !important; overflow-wrap: anywhere; line-height: 1.25; }

/* Hódfarkú cseréptető: saját tetőminta és lapos, Z-alakú hódfarkú tetőkampó a vázlaton */
.sfmc__roof[data-roof-variant="beaver"] { background-color: #8a3a26; background-image: linear-gradient(rgba(45,12,6,.18), rgba(45,12,6,.18)), url('images/roof-beaver.svg'); }
/* Hódfarkú tetőkampó méretarányos felülnézetben: a síntől a gerinc felé futó lemez a cserépen,
   a sínnel párhuzamos, furatos fül élből (alsó sötét él), a talpfül a felső cserépsor alatt (szaggatott) */
.sfmc__hook.sfmc__hook--beaver { margin-top: 0; border: .5px solid #59626a; border-top-color: #3f474e; border-radius: 0; background: linear-gradient(90deg, #aab2b8 0 6%, #d6dade 6% 94%, #a3abb1 94%), #d6dade; transform: translate(-50%, -100%); filter: drop-shadow(0 .6px .8px rgba(0,0,0,.6)); opacity: 1; }
.sfmc__hook.sfmc__hook--beaver::before { left: -.5px; right: -.5px; bottom: 100%; top: auto; width: auto; height: 21.7%; border: .5px dashed rgba(225,229,232,.85); border-bottom: 0; border-radius: 0; background: radial-gradient(circle at 25% 55%, rgba(40,45,50,.65) 0 .5px, transparent .7px), radial-gradient(circle at 50% 35%, rgba(40,45,50,.65) 0 .5px, transparent .7px), radial-gradient(circle at 75% 55%, rgba(40,45,50,.65) 0 .5px, transparent .7px), rgba(200,206,211,.28); box-shadow: none; transform: none; content: ''; }
.sfmc__hook.sfmc__hook--beaver::after { left: -.5px; right: -.5px; top: auto; bottom: -.5px; width: auto; height: 1.6px; border: 0; border-radius: 0; background: linear-gradient(90deg, #4c545b, #b9c0c5 45%, #4c545b); box-shadow: 0 .5px 0 rgba(0,0,0,.5); transform: none; content: ''; }