/*
Theme Name: Булмер - резервни части
Theme URI: https://bulmer-parts.com
Description: Резервни части за яхти и лодки, сервиз, ремонт и поддръжка на плавателни съдове
Author: УЕБ АРТ ЕООД
Author URI: https://webart.bg
Version: 1.0
Text Domain: webart
*/
@charset "UTF-8";
:root {
  --font-sans-serif: system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
  --body-font-family: "Roboto", sans-serif;
  --body-font-size: 0.969rem;
  --body-font-color: #2B3234;
  --body-light-weight: 300;
  --body-regular-weight: 400;
  --body-medium-weight: 500;
  --body-strong-weight: 600;
  --body-stronger-weight: 700;
  --body-line-height: 1.35;
  --link-color: #1A74C1;
  --link-hover-color: #2D84CE;

  /* TITLES */                                                      /* Unused */
  --headings-font-family: "Roboto", sans-serif;
  --headings-font-weight: 600; 
  --headings-font-style: normal; 
  --headings-margin-bottom: 1.25rem;
  --headings-color: #2C2C3D;
  --h1-font-size: 28px; --h1-line-height: 1.25;
  --h2-font-size: 22px; --h2-line-height: 1.25;
  --h3-font-size: 18px; --h3-line-height: 1.25;
  --h4-font-size: 17px; --h4-line-height: 1.25;
  --h5-font-size: 16px; --h5-line-height: 1.10;
  --h6-font-size: 16px; --h6-line-height: 1.10;
 
  --alert-success-background: #88FFD1;
  --alert-success-color: var(--body-font-color);
  --alert-info-background: #C1EFEF;
  --alert-info-color: var(--body-font-color);
  --alert-warning-background: #ffea80;
  --alert-warning-color: var(--body-font-color);
  --alert-danger-background: #ffabb0;
  --alert-danger-color: var(--body-font-color);

  /* BUTTONS */
  --button-height: 41px;
  --button-height-md: calc(var(--button-height) * 1.2);
  --button-height-lg: calc(var(--button-height) * 1.6);
  --button-radius: 3px; /* *0  OR  / 2 */
  --button-font-weight: var(--body-medium-weight);
  --button-font-size: 0.90rem;
  --button-line-height: 1.25;
  --button-padding: 0px 16px;
  --button-gap: 0 8px;
  --button-border-width: 2px;
  --button-shadow: 0px 11px 25px rgba(0, 0, 0, 0.15), 0px 37px 35px rgba(0, 0, 0, 0.15);
  --button-transition: ease-in-out 0.2s;

  /* FORMS */
  --form-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --form-border-width: 1px; 
  --form-border-color: #1f272b; 
  --form-outline-width: 2px; 
  --form-outline-color: #ece6e3; 
  --form-border-radius: .175rem; 

}

#debugger { display: inline-block; position: fixed; bottom: 30px; left: 0; z-index: 999; } #debugger summary { list-style: none; } #debugger summary::marker,  #debugger summary::-webkit-details-marker { display:none; } #debugger summary::before {  display: inline-block; background-color: #fff; color: #840372;  font-size: 11px; font-weight: 600; padding: 2px 2px; line-height: 1; content: '∞'; box-shadow: 0 1px 1px rgba(0,0,0,0.35); }


* { min-height: 0; min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .form-control { transition: none; } .form-select { transition: none; } }
html { scroll-behavior: smooth; }
body { 
  font-weight: var(--body-regular-weight); font-family: var(--body-font-family); font-size: var(--body-font-size); line-height: var(--body-line-height); color: var(--body-font-color);
  font-optical-sizing: auto; margin: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
  /* overflow-x: hidden; - DO NOT USE HERE, OTHERWISE POSITION SITCKY DOESN'T WORK! */
}
main a, main button, main input, main select, main textarea, main h2, main h3, main h4, main [tabindex="0"] { scroll-margin-top: 80px; scroll-margin-bottom: 100px; }
hr { margin: 1.5rem 0; color: inherit; border: 0; border-top: 1px solid transparent; opacity: 1; border-color: rgba(0, 0, 0, 0.1); }
p { margin-top: 0; margin-bottom: 1rem; }
abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; }
address { font-weight: inherit; margin-bottom: 0; font-style: normal; line-height: var(--body-line-height); }
h6, h5, h4, h3, h2, h1 { color: var(--headings-color); font-family: var(--headings-font-family); margin-bottom: var(--headings-margin-bottom);  font-weight: var(--headings-font-weight); font-style: var(--headings-font-style);   margin-top: 0; }
h1, .h1 { font-size:var(--h1-font-size); line-height: var(--h1-line-height); } 
h2, .h2 { font-size:var(--h2-font-size); line-height: var(--h2-line-height); } 
h3, .h3 { font-size:var(--h3-font-size); line-height: var(--h3-line-height); } 
h4, .h4 { font-size:var(--h4-font-size); line-height: var(--h4-line-height); } 
h5, .h5 { font-size:var(--h5-font-size); line-height: var(--h5-line-height); } 
h6, .h6 { font-size:var(--h6-font-size); line-height: var(--h6-line-height); } 
small { font-size: 80%; }
img,svg {vertical-align: middle;}
img {max-width: 100%; height: auto;  }
input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit; outline: none; }
[role=button]{cursor:pointer}
textarea{resize:vertical}
[type=search]{outline-offset:-2px;-webkit-appearance:textfield}
::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0}
::-webkit-inner-spin-button{height:auto}
[type=search]{outline-offset:-2px;-webkit-appearance:textfield}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-color-swatch-wrapper{padding:0}
::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}
::file-selector-button{font:inherit;-webkit-appearance:button}
/* input:-internal-autofill-selected being overridden on Chrome (via webkit) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active {
  -webkit-text-fill-color: inherit;                     /* text color */
  -webkit-box-shadow: 0 0 0px 1000px transparent inset; /* background color */
  transition: background-color 5000s ease-in-out 0s;
}
input[type=number]{ -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; appearance: none;  margin: 0; opacity: 1; }
iframe{border:0}
[hidden]{display:none!important}
a { color: var(--link-color); text-decoration: underline; }
a:hover { color: var(--link-hover-color); text-decoration: none;  }
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }

mark { background-color: #FFEDA6; padding: 0 3px; }

dl { margin-top: 0; margin-bottom: 0; }
dt { font-weight: inherit; }
dd { margin-bottom: 0; margin-left: 0; }

strong, b { font-weight: var(--body-medium-weight); }
p.lead { font-size: 120%; }

table { margin-bottom: 0px; width: 100%; border-spacing: 0; border-collapse: collapse; }
[class*="screen-reader"] { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden;  }

/* COMPONENTS */
.ratio { display: block; position:relative; width:100%; } .ratio::before{display:block;padding-top:var(--aspect-ratio);content:""} .ratio > *{ display: block; position:absolute;top:0;left:0;width:100%;height:100%} 
.ratio-1x1{--aspect-ratio:100%} .ratio-4x3{--aspect-ratio:calc(3 / 4 * 100%)} .ratio-16x9{--aspect-ratio:calc(9 / 16 * 100%)} .ratio-21x9{--aspect-ratio:calc(9 / 21 * 100%)}
.ratio-3x4{--aspect-ratio:calc(4 / 3 * 100%)} .ratio-9x16{--aspect-ratio:calc(16 / 9 * 100%)} .ratio-9x21{--aspect-ratio:calc(21 / 9 * 100%)}
.ratio-rounded { border-radius: var(--button-radius); overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.clearfix { visibility:hidden; display:block; font-size:0; content:''; clear:both; height:0; } .clearfix::after{display:block;clear:both;content:""}
.trans { --webkit-transition:all 0.2s; --moz-transition:all 0.2s; transition:all 0.2s; }
.img-cover { width: 100%; height: 100%; object-fit: cover; } .img-contain { width: 100%; height: 100%; object-fit: contain; }  .img-contain.left { object-position: left; } .img-contain.right { object-position: right; } .img-contain.top { object-position: top; }
.cover { background-size: cover; background-position: center center;  background-repeat: no-repeat; }

.text-break { word-wrap: break-word; word-break: break-word; }
.text-uppercase { text-transform: uppercase; }
.text-start { text-align: left; justify-content: flex-start; }
.text-center { text-align: center; justify-content: center; }
.text-end { text-align: right; justify-content: flex-end; }

.alert {  padding: 20px; border-radius: 4px; margin-bottom: 20px; color: var(--alert-success-color);   }
.alert-sm { padding: 6px 10px; font-size: 90%; }
.alert-success { background-color: var(--alert-success-background); }
.alert-info { background-color: var(--alert-info-background); }
.alert-warning { background-color: var( --alert-warning-background); }
.alert-danger { background-color: var(--alert-danger-background); }


.badge { display: inline-block; line-height: 1; border: 1px solid transparent; font-size: 13px; font-weight: 400; padding: 5px 8px; border-radius: 4px; }
.badge-success { background-color: #D7F8E4; color: var(--green-dark); }
.badge-warning { background-color: #FFEBD2; color: var(--red-dark); }
.badge-info { background-color: #d2f5ff; color: var(--blue); }
.badge-danger { background-color: #ff4141; color: var(--white); }

/* GRID SYSTEM  - https://www.mozilla.org/en-GB/firefox/119.0/whatsnew/ */

.container, .container-fluid {
  --container-gutter: 20px;
  /* zoom: 1; -> WARNING: This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. */
  margin: 0 auto; width: 100%; 
  padding-right: var(--container-gutter); padding-left: var(--container-gutter);
}
.container-fluid { max-width: 100%; }

.table { display: table; width:100%; max-width:100%; border-spacing:0; border-collapse:collapse;   margin-bottom: 1rem; background-color: #fff; }
.table thead th,
.table tfoot th { text-align: left; }
.table-bordered { border: 1px solid #dee2e6; }
.table-bordered tr { transition:background-color 0.2s; }
.table-bordered th,
.table-bordered td { padding: 6px 12px;   border: 1px solid #dee2e6;   }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.03); }
.table-hover tbody tr:hover { background-color: rgba(79, 158, 111, 0.212); }


/* -------------------------------> BUTTONS <------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; 
    height: var(--button-height); font-size: var(--button-font-size); line-height: var(--button-line-height); padding: var(--button-padding); gap: var(--button-gap); border-radius: var(--button-radius); font-weight: var(--button-font-weight); border: var(--button-border-width) solid transparent; 
    white-space: nowrap; vertical-align: middle; text-decoration: none; background-color: transparent;    
    -webkit-transition:var(--button-transition); -moz-transition:var(--button-transition); transition:var(--button-transition);
    min-width: 160px; 
}
.btn:hover { text-decoration: none; }
.btn strong { font-weight: 500; }
.btn-block { display: flex; }
.btn.has_shadow { box-shadow: var(--button-shadow); }
.btn .icon { line-height: 1; font-size: 120%; }

/* Solid */
.btn-solid.btn-blue { border-color: var(--blue);  background-color: var(--blue);  color: var(--white); }
.btn-solid.btn-green { border-color: var(--green);  background-color: var(--green);  color: var(--black); }
.btn-solid.btn-red { border-color: var(--red-dark);  background-color: var(--red-dark);  color: var(--white); }

/* Outlined */
.btn-outline.btn-blue { color: var(--blue); border-color: var(--blue);  }
.btn-outline.btn-green { color: var(--green); border-color:var(--green);  }
.btn-outline.btn-red { color: var(--red-dark); border-color: var(--red-dark); } 
.btn-outline.btn-white { color: var(--white); border-color: var(--white); }

/* Link */
.btn-link { padding: 0; min-width: auto; }
.btn-link:hover .label { text-decoration: underline; }
.btn-link.btn-blue { color: var(--blue); }

/* GRID SYSTEM */
.grid {
  --row-gap-v: 30px; 
  --row-gap-h: var(--row-gap-v);
  --column-gap: var(--row-gap-h);
  display: grid;
  gap: var(--row-gap-v) var(--row-gap-h); column-gap: var(--column-gap);
  /* place-items: center; */
  grid-template-rows: auto; /* max-content 1fr; */
  grid-template-columns: repeat(12, 1fr);
}
.grid-reverse { } /* not possible  */
.grid[data-columns="12"] { grid-template-columns: repeat(12, 1fr); }
.grid[data-columns="16"] { grid-template-columns: repeat(16, 1fr); }
.grid > .cell-1{grid-column:span 1}
.grid > .cell-2{grid-column:span 2}
.grid > .cell-3{grid-column:span 3}
.grid > .cell-4{grid-column:span 4}
.grid > .cell-5{grid-column:span 5}
.grid > .cell-6{grid-column:span 6}
.grid > .cell-7{grid-column:span 7}
.grid > .cell-8{grid-column:span 8}
.grid > .cell-9{grid-column:span 9}
.grid > .cell-10{grid-column:span 10}
.grid > .cell-11{grid-column:span 11}
.grid > .cell-12{grid-column:span 12}
.grid > .cell-13{grid-column:span 13}
.grid > .cell-14{grid-column:span 14}
.grid > .cell-15{grid-column:span 15}
.grid > .cell-16{grid-column:span 16}

.grid > [class*="cell-"] > .cell-inner { display: flex; flex-direction: column; height: 100%; }

.grid.gap-0 { gap: 0 0; column-gap: 0; }
.grid.gap-sm { gap: calc(var(--row-gap-v) * 0.5) calc(var(--row-gap-h)* 0.5); column-gap: calc(var(--column-gap) * 0.5); }
.grid.gap-md { gap: calc(var(--row-gap-v) * 1.5) calc(var(--row-gap-h)* 1.5); column-gap: calc(var(--column-gap) * 1.5); }
.grid.gap-lg { gap: calc(var(--row-gap-v) * 2.0) calc(var(--row-gap-h)* 2.0); column-gap: calc(var(--column-gap) * 2.0); }
.grid.gap-xl { gap: calc(var(--row-gap-v) * 3.0) calc(var(--row-gap-h)* 3.0); column-gap: calc(var(--column-gap) * 3.0); }

/* FLEX SYSTEM */
.row {
  --column-gutter-default: 30px;
  --column-gutter: var(--column-gutter-default);
  --row-gutter: var(--column-gutter);
  display: flex;
  flex-wrap: wrap; flex-direction: row; /* = flex-flow: row wrap; */
  margin-left: calc(var(--column-gutter) / 2 * -1);
  margin-right: calc(var(--column-gutter) / 2 * -1); 
  column-gap: 0px; row-gap: var(--column-gutter);  /* = gap: var(--column-gutter) 0; */ 
}
.row-reverse { flex-direction: row-reverse; } 
.row-center { justify-content: center;  }
.row-middle { align-items: center; }
.row-end { align-items: flex-end; }

.row > [class*="col-"] { 
    flex: 0 0 auto; flex-shrink: 0; width: 100%; max-width: 100%; 
    padding-left: calc(var(--column-gutter) / 2);
    padding-right: calc(var(--column-gutter) / 2);
}
.row > [class*="col-"] > .col-inner { display: flex; flex-direction: column; height: 100%; }

.row > .col-1 { width: 8.33333333%; }
.row > .col-2 { width: 16.66666667%; }
.row > .col-20 { width: 20%; }
.row > .col-3 { width: 25%; }
.row > .col-4 { width: 33.33333333%; }
.row > .col-5 { width: 41.66666667%; }
.row > .col-6 { width: 50%; }
.row > .col-7 { width: 58.33333333%; }
.row > .col-8 { width: 66.66666667%; }
.row > .col-9 { width: 75%; }
.row > .col-10 { width: 83.33333333%; }
.row > .col-11 { width: 91.66666667%; }
.row > .col-12 { width: 100%; }

.row.gutter-0    { --column-gutter: 0;    }
.row.gutter-sm   { --column-gutter: 15px; }
.row.gutter-md   { --column-gutter: 45px; }
.row.gutter-lg   { --column-gutter: 60px; }
.row.gutter-xl   { --column-gutter: 90px; }
.row.gutter-xxl  { --column-gutter: 120px; }

/* SPACING  */
.mb-3 { margin-bottom: 1.4rem; }
.mb-2 { margin-bottom: 0.7rem; }
.mb-1 { margin-bottom: 0.2rem; }
.mb-0 { margin-bottom: 0; }

.form-label { display: inline-block; margin-bottom: .25rem; color: var(--form-border-color);  }
.form-control,
.form-select,
.woocommerce-ordering select  {
  display: block; width: 100%;
  padding: .575rem .75rem;
  font-size: var(--body-font-size);
  font-weight: var(--body-regular-weight); 
  line-height: 1.5;
  color: var(--body-font-color);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: var(--color-white);
  background-clip: padding-box;
  border: var(--form-border-width) solid var(--form-border-color);
  border-radius: var(--form-border-radius);
  outline: var(--form-outline-width) solid var(--form-outline-color);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-select,
.woocommerce-ordering select { 
  padding-right: 40px; background-image: var(--form-select-chevron);
  background-repeat: no-repeat; background-position: right .45rem center; background-size: 24px 18px ;
}

/* CHECKBOXES */
.form-check { display: block; min-height: 1.5rem; padding-left: 1.9em; margin-bottom: .125rem; }
.form-check .form-check-input { float: left; margin-left: -1.9em; }
.form-check .form-check-label { user-select: none; cursor: pointer;  }
.form-check-input {
  flex-shrink: 0;
  width: 1.35em; height: 1.35em; margin-top: .035em; vertical-align: top;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: #ffffff;
  background-image: var(--form-check-image); background-repeat: no-repeat; background-position: center; background-size: contain;
  border: var(--form-border-width) solid var(--form-border-color);
  outline: var(--form-outline-width) solid var(--form-outline-color);
  -webkit-print-color-adjust: exact; color-adjust: exact;
  print-color-adjust: exact;
}
.form-check-input { border-radius: .15em; }
.form-check-input:checked[type="checkbox"] {
    background-color: var(--color-green); border-color: var(--color-green);
  --form-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* FORM GROUP */
.input-group { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.input-group-text { display: flex; align-items: center; padding: .575rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--body-font-color); text-align: center; white-space: nowrap; background-color: var(--color-grey-light); border: var(--form-border-width) solid var(--bs-border-color); border-radius: var(--form-border-radius);  }
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control, .input-group > .input-text, .input-group > .form-floating, .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(var(--bs-border-width) * -1); border-top-left-radius: 0; border-bottom-left-radius: 0; }
 



/* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║                                       BREAKPOINTS                                             ║ */
/* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 576px) {
    .container { max-width: 540px; max-width: 100%; }
    .hidden-sm-up { display: none !important; }
}
@media (min-width: 768px) {
    .container { max-width: 720px; max-width: 100%; }
    .hidden-md-up { display: none !important; }
}
@media (min-width: 992px) {
    .container { max-width: 960px; max-width: 100%; }
    .hidden-lg-up { display: none !important; } 
} /* @media ---| >= 992px |--- */
@media (min-width: 1280px) {
    .container { max-width: 1170px; max-width: 100%;  }
    .hidden-xl-up { display: none !important; }
}
@media (min-width: 1366px) {
    .container { max-width: 1170px; } /* was 1170px ; 1190px; 1278px; 1320px */ 
    .hidden-xxl-up { display: none !important; }
}
@media (min-width: 1440px) {
    .container { max-width: 1352px;  }
    .hidden-3xl-up { display: none !important; }
}
@media (min-width: 1600px) {
    .container { /* max-width: 1512px; */ }
    .hidden-4xl-up { display: none !important; }
}
@media (min-width: 1920px) {
    .container { /* max-width: 90%; */ }
} /* 1920px & Up */
/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║ ####################################   DEVELOPMENT BREAKPOINTS   ##################################  ║ */
/* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */

/* 4XL */ 
@media (max-width: 1919.98px) { 
  #debugger summary::before { content:'4XL'; }
} /* @media ---| width < 1920px |--- */

/* 3XL */ 
@media (max-width: 1599.98px) { 
  #debugger summary::before { content:'3XL'; }


} /* @media ---| width < 1600px |--- */

/* 2XL */ @media (max-width: 1439.98px) { 
  #debugger summary::before { content:'XXL'; }

} /* @media ---| width < 1440px |--- */

/* XL */ @media (max-width: 1365.98px) {

  #debugger summary::before { content:'XL'; } 

} /* @media ---| width < 1366px |--- */

/* LG */ 
@media (max-width: 1279.98px) {

  :root {
    --h1-font-size: 24px; --h1-line-height: 1.25;
    --h2-font-size: 20px; --h2-line-height: 1.25;
    --h3-font-size: 19px; --h3-line-height: 1.25;
    --h4-font-size: 19px; --h4-line-height: 1.25;
    --h5-font-size: 18px; --h5-line-height: 1.25;
  }

  #debugger summary::before { content:'LG'; }
  

} /* @media ---| width < 1200px |--- */

/* MD */ @media (max-width: 991.98px) {

  :root {
    --h1-font-size: 21px; --h1-line-height: 1.25;
    --h2-font-size: 19px; --h2-line-height: 1.25;
    --h3-font-size: 18px; --h3-line-height: 1.25;
    --h4-font-size: 18px; --h4-line-height: 1.25;
    --h5-font-size: 17px; --h5-line-height: 1.25;
  }

  #debugger summary::before { content:'MD'; }

} /* @media ---| width < 992px |--- */

/* SM */ @media (max-width: 767.98px) {

  :root {

    --h1-font-size: 21px; --h1-line-height: 1.25;
    --h2-font-size: 18px; --h2-line-height: 1.25;
    --h3-font-size: 17px; --h3-line-height: 1.25;
    --h4-font-size: 16px; --h4-line-height: 1.25;
    --h5-font-size: 16px; --h5-line-height: 1.25;

    --button-font-size: 0.82rem;
  }

  

  #debugger summary::before { content:'SM'; }

} /* @media ---| width < 768px |--- */

/* XS */ @media (max-width: 575.98px) and (orientation:landscape) {}
@media (max-width: 575.98px) {

  #debugger summary::before { content:'XS'; }  

} /* @media ---| width < 576px |--- */

@media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { }

/* XXS */ @media (max-width: 319.98px) and (orientation:landscape) {}
@media (max-width: 319.98px) {

  #debugger summary::before { content:'XXS'; }

} /* @media ---| width < 320px |--- */

/* ---| END |--- */
/* ¡ NO STYLES BELOW THIS LINE PLEASE ! */