/* Front compatibility layer: Retro-term utilities used by the Front views. */
:root {
  --bs-body-bg: var(--front-main-bg, #f8f9fa);
  --bs-body-color: var(--front-main-text, #212529);
  --bs-secondary-color: rgba(100, 116, 139, .9);
  --bs-secondary-rgb: 100, 116, 139;
  --bs-border-color: var(--front-border, rgba(15, 23, 42, .14));
  --bs-emphasis-color: var(--front-main-text, #212529);
  --bs-emphasis-color-rgb: 33, 37, 41;
  --bs-primary: var(--front-accent, #b45309);
  --bs-primary-rgb: 180, 83, 9;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
}

*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }

.container { width: 100%; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.row > * { flex-shrink: 0; max-width: 100%; padding-inline: .75rem; width: 100%; }
.row.g-3 { row-gap: 1rem; }
.row.g-4 { row-gap: 1.5rem; }
.row.gy-3 { row-gap: 1rem; }
.col { flex: 1 0 0%; }
.col-6 { width: 50%; }
.col-12 { width: 100%; }
@media (min-width: 768px) {
  .col-md-2 { width: 16.666667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.333333%; }
  .col-md-6 { width: 50%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.333333%; }
  .col-md-8 { width: 66.666667%; }
  .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-2 { width: 16.666667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.333333%; }
  .col-lg-6 { width: 50%; }
  .col-lg-8 { width: 66.666667%; }
  .col-lg-5 { width: 41.666667%; }
  .col-lg-7 { width: 58.333333%; }
  .col-lg-10 { width: 83.333333%; }
  .col-lg-12 { width: 100%; }
}
@media (min-width: 1200px) {
  .col-xl-2 { width: 16.666667%; }
  .col-xl-11 { width: 91.666667%; }
}

.d-none { display: none !important; }
.visually-hidden { border: 0 !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-md-row { flex-direction: column; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-stretch { align-items: stretch !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-block { display: block !important; }
  .flex-md-row { flex-direction: row !important; }
  .align-items-md-center { align-items: center !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
}

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.text-center { text-align: center !important; }
.text-start { text-align: start !important; }
.text-end { text-align: end !important; }
.text-decoration-none { text-decoration: none !important; }
.text-secondary, .text-secondary-emphasis { color: var(--bs-secondary-color) !important; }
.text-danger { color: #dc2626 !important; }
.small { font-size: .875em !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fs-2 { font-size: clamp(1.75rem, 4vw, 2.25rem) !important; }
.fs-4 { font-size: 1.5rem !important; }
.lh-1 { line-height: 1 !important; }
.text-nowrap { white-space: nowrap !important; }
.text-break { overflow-wrap: break-word !important; }
.text-lg-start, .text-lg-end { text-align: center !important; }

.m-0 { margin: 0 !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.me-1 { margin-inline-end: .25rem !important; }
.me-2 { margin-inline-end: .5rem !important; }
.ms-1 { margin-inline-start: .25rem !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.px-3 { padding-inline: 1rem !important; }
.ps-3 { padding-left: 1rem !important; }
.py-2 { padding-block: .5rem !important; }
.py-3 { padding-block: 1rem !important; }

.rounded { border-radius: .375rem !important; }
.rounded-3 { border-radius: 1rem !important; }
.rounded-4 { border-radius: 1.5rem !important; }
.rounded-pill { border-radius: 999px !important; }
.rounded-top-4 { border-radius: 1.5rem 1.5rem 0 0 !important; }
.border { border: 1px solid var(--bs-border-color) !important; }
.border-0 { border: 0 !important; }
.shadow-sm { box-shadow: 0 .25rem .75rem rgba(15, 23, 42, .08) !important; }
.bg-white { background: #fff !important; }
.bg-light { background: #f8f9fa !important; }
.bg-dark { background: #212529 !important; color: #fff !important; }
.bg-secondary-subtle { background: color-mix(in srgb, var(--bs-secondary-color) 12%, transparent) !important; }

.card { display: flex; flex-direction: column; min-width: 0; position: relative; word-wrap: break-word; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; }
.card-body { flex: 1 1 auto; padding: 1rem; }
.card-title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; }
.card-text { margin: 0 0 1rem; }
.card-img-top { width: 100%; border-radius: 1rem 1rem 0 0; }

.btn { align-items: center; background: transparent; border: 1px solid transparent; border-radius: .65rem; color: inherit; cursor: pointer; display: inline-flex; font-weight: 600; gap: .4rem; justify-content: center; line-height: 1.5; padding: .55rem 1rem; text-align: center; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; vertical-align: middle; }
.btn:hover, .btn:focus-visible { transform: translateY(-1px); }
.btn-sm { border-radius: .5rem; font-size: .875rem; padding: .35rem .65rem; }
.btn-lg { font-size: 1.125rem; padding: .75rem 1.25rem; }
.btn-primary { background: var(--front-accent, #b45309); border-color: var(--front-accent, #b45309); color: #fff !important; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--front-accent-hover, #9a4308); color: #fff !important; }
.btn-outline-secondary { border-color: var(--bs-border-color); color: var(--bs-body-color); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible { background: color-mix(in srgb, var(--bs-secondary-color) 12%, transparent); }
.btn-outline-dark { border-color: currentColor; color: var(--bs-body-color); }
.btn-link { border: 0; color: var(--front-accent, #b45309); text-decoration: underline; }

.form-label { display: inline-block; font-weight: 600; margin-bottom: .4rem; }
.form-control, .form-select { appearance: none; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .65rem; color: var(--bs-body-color); display: block; line-height: 1.5; min-height: 42px; padding: .55rem .75rem; width: 100%; }
.form-control:focus, .form-select:focus { border-color: var(--front-accent, #b45309); box-shadow: 0 0 0 3px color-mix(in srgb, var(--front-accent, #b45309) 18%, transparent); outline: 0; }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-check { display: flex; gap: .5rem; min-height: 1.5rem; padding-left: 0; }
.form-check-input { accent-color: var(--front-accent, #b45309); margin-top: .25rem; }
.form-check-label { cursor: pointer; }

.badge { align-items: center; border-radius: 999px; display: inline-flex; font-size: .75rem; font-weight: 700; line-height: 1; padding: .4rem .65rem; }
.bg-primary, .text-bg-primary { background: var(--front-accent, #b45309) !important; color: #fff !important; }
.bg-success, .text-bg-success { background: #198754 !important; color: #fff !important; }
.bg-warning, .text-bg-warning { background: #f59e0b !important; color: #201a14 !important; }
.bg-danger, .text-bg-danger { background: #dc3545 !important; color: #fff !important; }
.bg-light, .text-bg-light { color: var(--bs-body-color) !important; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bs-secondary-color); content: '/'; float: left; padding-right: .35rem; }
.breadcrumb-item a { color: var(--front-accent, #b45309); text-decoration: none; }
.breadcrumb-item.active { color: var(--bs-secondary-color); }
.nav { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav-link { color: inherit; display: block; padding: .5rem .75rem; text-decoration: none; }
.nav-tabs { border-bottom: 1px solid var(--bs-border-color); }
.nav-tabs .nav-link.active { color: var(--front-accent, #b45309); }
.tab-pane { display: none; }
.tab-pane.show, .tab-pane.active { display: block; }
.alert { border: 1px solid var(--bs-border-color); border-radius: .75rem; margin-bottom: 1rem; padding: 1rem; }
.alert-primary { background: color-mix(in srgb, var(--front-accent, #b45309) 12%, transparent); }
.alert-danger { background: rgba(220, 53, 69, .12); color: #b42318; }
.alert-success { background: rgba(25, 135, 84, .12); color: #146c43; }
.alert-warning { background: rgba(245, 158, 11, .14); color: #854d0e; }
.list-unstyled { list-style: none !important; padding-left: 0 !important; }
.list-inline { list-style: none; padding-left: 0; }
.list-inline-item { display: inline-block; }
.list-group { display: flex; flex-direction: column; margin: 0; padding-left: 0; }
.list-group-item { background: transparent; border: 1px solid var(--bs-border-color); display: block; padding: .75rem 1rem; position: relative; text-decoration: none; }
.list-group-item + .list-group-item { border-top: 0; }
.table { border-collapse: collapse; color: inherit; vertical-align: top; width: 100%; }
.table th, .table td { border-bottom: 1px solid var(--bs-border-color); padding: .7rem; text-align: inherit; }
.table-responsive { overflow-x: auto; }
.ratio { overflow: hidden; position: relative; width: 100%; }
.ratio::before { content: ''; display: block; padding-top: 56.25%; }
.ratio > * { height: 100%; inset: 0; position: absolute; width: 100%; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.top-0 { top: 0 !important; }
.end-0 { right: 0 !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.overflow-hidden { overflow: hidden !important; }

/* The footer is initially kept in normal flow for a no-JS fallback. The
   frontend performance script promotes it to a fixed parallax layer after
   the page has loaded. Do not use !important here: the script must be able
   to update position, inset, and z-index at runtime. */
footer[data-front-parallax-footer] { margin-top: 0 !important; }
.front-floating-controls-right.is-footer-obscured { opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
body:not(.cms-body) main { min-height: auto !important; position: relative; z-index: 1; }
body:not(.cms-body) footer[data-front-parallax-footer] { position: relative; z-index: 0; }
footer, main { padding: 10rem 3rem 1.5rem; }
body.front-listing-page main { padding: 2rem 3rem 1.5rem !important; }
.youtube-demo-page { padding: 2rem 3rem 1.5rem !important; }
.home-page-main > section:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}

@media (max-width: 767.98px) {
  footer, main { padding: 1rem; }
  body.front-listing-page main { padding: 1rem !important; }
  .youtube-demo-page { padding: 1rem !important; }
  body:not(.cms-body) main {
    background-attachment: scroll !important;
    transform: none !important;
  }
  .home-page-main .home-front-widget-gallery .product-gallery,
  .home-page-main .home-developer-chip,
  .home-page-main .home-search-shell,
  .home-page-main .home-lite-hero-card,
  .home-page-main .home-hero .hero-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .row { margin-inline: -.5rem; }
  .row > * { padding-inline: .5rem; }
}