/* SOURCE: catalog/view/theme/bs5/stylesheet/bootstrap-layout-only.css */
:root {
    --bs-body-bg: #fff;
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
    --bs-light: #f8f9fa;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-color: #212529;
    --bs-tertiary-bg: #f8f9fa;
    --bs-dropdown-spacer: 0.125rem;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}
hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.25;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
img,
svg {
    vertical-align: middle;
}
img {
    max-width: 100%;
    height: auto;
}
table {
    caption-side: bottom;
    border-collapse: collapse;
}
button,
input,
select,
textarea {
    margin: 0;
    font: inherit;
}
button {
    text-transform: none;
}
[role="button"] {
    cursor: pointer;
}
label {
    display: inline-block;
}
[hidden] {
    display: none !important;
}
.container,
.container-xxl {
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 1400px) {
    .container-xxl,
    .container {
        max-width: 1320px;
    }
}
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}
.col {
    flex: 1 0 0%;
}
.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}
.col-3 {
    flex: 0 0 auto;
    width: 25%;
}
.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}
.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}
.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}
.col-9 {
    flex: 0 0 auto;
    width: 75%;
}
.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}
@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }
    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
    }
    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
.g-2,
.gx-2 {
    --bs-gutter-x: 0.5rem;
}
.g-2,
.gy-2 {
    --bs-gutter-y: 0.5rem;
}
.g-3,
.gx-3 {
    --bs-gutter-x: 1rem;
}
.g-3,
.gy-3 {
    --bs-gutter-y: 1rem;
}
.g-4,
.gx-4 {
    --bs-gutter-x: 1.5rem;
}
.g-4,
.gy-4 {
    --bs-gutter-y: 1.5rem;
}
.d-flex {
    display: flex !important;
}
.d-inline-flex {
    display: inline-flex !important;
}
.d-block {
    display: block !important;
}
.d-inline-block {
    display: inline-block !important;
}
.d-none {
    display: none !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.align-items-center {
    align-items: center !important;
}
.align-middle {
    vertical-align: middle !important;
}
.justify-content-center {
    justify-content: center !important;
}
.justify-content-between {
    justify-content: space-between !important;
}
.justify-content-end {
    justify-content: flex-end !important;
}
@media (min-width: 992px) {
    .d-lg-inline {
        display: inline !important;
    }
    .sticky-lg-top {
        position: sticky !important;
        top: 0;
        z-index: 1020;
    }
}
.w-100 {
    width: 100% !important;
}
.h-100 {
    height: 100% !important;
}
.m-0 {
    margin: 0 !important;
}
.m-1 {
    margin: 0.25rem !important;
}
.m-2 {
    margin: 0.5rem !important;
}
.m-3 {
    margin: 1rem !important;
}
.m-4 {
    margin: 1.5rem !important;
}
.m-5 {
    margin: 3rem !important;
}
.m-auto {
    margin: auto !important;
}
.mt-0 {
    margin-top: 0 !important;
}
.mt-1 {
    margin-top: 0.25rem !important;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.mt-3 {
    margin-top: 1rem !important;
}
.mt-4 {
    margin-top: 1.5rem !important;
}
.mt-5 {
    margin-top: 3rem !important;
}
.mt-auto {
    margin-top: auto !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.mb-1 {
    margin-bottom: 0.25rem !important;
}
.mb-2 {
    margin-bottom: 0.5rem !important;
}
.mb-3 {
    margin-bottom: 1rem !important;
}
.mb-4 {
    margin-bottom: 1.5rem !important;
}
.mb-5 {
    margin-bottom: 3rem !important;
}
.mb-auto {
    margin-bottom: auto !important;
}
.ms-0 {
    margin-left: 0 !important;
}
.ms-1 {
    margin-left: 0.25rem !important;
}
.ms-2 {
    margin-left: 0.5rem !important;
}
.ms-3 {
    margin-left: 1rem !important;
}
.ms-4 {
    margin-left: 1.5rem !important;
}
.ms-5 {
    margin-left: 3rem !important;
}
.ms-auto {
    margin-left: auto !important;
}
.me-0 {
    margin-right: 0 !important;
}
.me-1 {
    margin-right: 0.25rem !important;
}
.me-2 {
    margin-right: 0.5rem !important;
}
.me-3 {
    margin-right: 1rem !important;
}
.me-4 {
    margin-right: 1.5rem !important;
}
.me-5 {
    margin-right: 3rem !important;
}
.me-auto {
    margin-right: auto !important;
}
.mx-0 {
    margin-inline: 0 !important;
}
.mx-1 {
    margin-inline: 0.25rem !important;
}
.mx-2 {
    margin-inline: 0.5rem !important;
}
.mx-3 {
    margin-inline: 1rem !important;
}
.mx-4 {
    margin-inline: 1.5rem !important;
}
.mx-5 {
    margin-inline: 3rem !important;
}
.mx-auto {
    margin-inline: auto !important;
}
.p-0 {
    padding: 0 !important;
}
.p-1 {
    padding: 0.25rem !important;
}
.p-2 {
    padding: 0.5rem !important;
}
.p-3 {
    padding: 1rem !important;
}
.p-4 {
    padding: 1.5rem !important;
}
.p-5 {
    padding: 3rem !important;
}
.p-auto {
    padding: auto !important;
}
.pt-0 {
    padding-top: 0 !important;
}
.pt-1 {
    padding-top: 0.25rem !important;
}
.pt-2 {
    padding-top: 0.5rem !important;
}
.pt-3 {
    padding-top: 1rem !important;
}
.pt-4 {
    padding-top: 1.5rem !important;
}
.pt-5 {
    padding-top: 3rem !important;
}
.pt-auto {
    padding-top: auto !important;
}
.pb-0 {
    padding-bottom: 0 !important;
}
.pb-1 {
    padding-bottom: 0.25rem !important;
}
.pb-2 {
    padding-bottom: 0.5rem !important;
}
.pb-3 {
    padding-bottom: 1rem !important;
}
.pb-4 {
    padding-bottom: 1.5rem !important;
}
.pb-5 {
    padding-bottom: 3rem !important;
}
.pb-auto {
    padding-bottom: auto !important;
}
.ps-0 {
    padding-left: 0 !important;
}
.ps-1 {
    padding-left: 0.25rem !important;
}
.ps-2 {
    padding-left: 0.5rem !important;
}
.ps-3 {
    padding-left: 1rem !important;
}
.ps-4 {
    padding-left: 1.5rem !important;
}
.ps-5 {
    padding-left: 3rem !important;
}
.ps-auto {
    padding-left: auto !important;
}
.px-0 {
    padding-inline: 0 !important;
}
.px-1 {
    padding-inline: 0.25rem !important;
}
.px-2 {
    padding-inline: 0.5rem !important;
}
.px-3 {
    padding-inline: 1rem !important;
}
.px-4 {
    padding-inline: 1.5rem !important;
}
.px-5 {
    padding-inline: 3rem !important;
}
.px-auto {
    padding-inline: auto !important;
}
.py-0 {
    padding-block: 0 !important;
}
.py-1 {
    padding-block: 0.25rem !important;
}
.py-2 {
    padding-block: 0.5rem !important;
}
.py-3 {
    padding-block: 1rem !important;
}
.py-4 {
    padding-block: 1.5rem !important;
}
.py-5 {
    padding-block: 3rem !important;
}
.py-auto {
    padding-block: auto !important;
}
@media (min-width: 768px) {
    .p-md-5 {
        padding: 3rem !important;
    }
}
.gap-1 {
    gap: 0.25rem !important;
}
.gap-2 {
    gap: 0.5rem !important;
}
.gap-3 {
    gap: 1rem !important;
}
.gap-4 {
    gap: 1.5rem !important;
}
.text-start {
    text-align: left !important;
}
.text-end {
    text-align: right !important;
}
.text-center {
    text-align: center !important;
}
.text-muted {
    color: rgba(33, 37, 41, 0.75) !important;
}
.text-danger {
    color: #dc3545 !important;
}
.text-uppercase {
    text-transform: uppercase !important;
}
.text-decoration-none {
    text-decoration: none !important;
}
.text-decoration-line-through {
    text-decoration: line-through !important;
}
.fw-semibold {
    font-weight: 600 !important;
}
.small,
small {
    font-size: 0.875em;
}
.fs-5 {
    font-size: 1.25rem !important;
}
.h2,
.h3,
.h5,
.h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.h2 {
    font-size: 2rem;
}
.h3 {
    font-size: 1.75rem;
}
.h5 {
    font-size: 1.25rem;
}
.h6 {
    font-size: 1rem;
}
.border {
    border: 1px solid var(--bs-border-color) !important;
}
.border-0 {
    border: 0 !important;
}
.rounded {
    border-radius: 0.375rem !important;
}
.rounded-4 {
    border-radius: 1rem !important;
}
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.bg-body-tertiary {
    background-color: var(--bs-tertiary-bg) !important;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.img-thumbnail {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
.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;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    line-height: 1.5;
}
.collapse:not(.show) {
    display: none;
}
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}
.fade {
    transition: opacity 0.15s linear;
}
.fade:not(.show) {
    opacity: 0;
}
.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
    margin-top: var(--bs-dropdown-spacer);
}
.dropdown,
.dropup,
.dropend,
.dropstart {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
}
.dropdown-menu.show {
    display: block;
}
.dropdown-menu-end {
    right: 0;
    left: auto;
}
.dropdown-toggle {
    white-space: nowrap;
}


/* SOURCE: catalog/view/theme/bs5/stylesheet/theme-material-m3-opencart.css */
@charset "UTF-8";
:root {
  --m3-primary: #6750a4;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #e9ddff;
  --m3-on-primary-container: #22005d;
  --m3-secondary: #625b71;
  --m3-secondary-container: #e8def8;
  --m3-tertiary: #7d5260;
  --m3-tertiary-container: #ffd8e4;
  --m3-error: #b3261e;
  --m3-error-container: #f9dedc;
  --m3-background: #fef7ff;
  --m3-on-background: #1d1b20;
  --m3-surface: #fffbfe;
  --m3-surface-dim: #ded8e1;
  --m3-surface-bright: #fffbfe;
  --m3-surface-container-low: #f7f2fa;
  --m3-surface-container: #f3edf7;
  --m3-surface-container-high: #ece6f0;
  --m3-surface-container-highest: #e6e0e9;
  --m3-on-surface: #1d1b20;
  --m3-on-surface-variant: #49454f;
  --m3-outline: #79747e;
  --m3-outline-variant: #cac4d0;
  --m3-inverse-surface: #322f35;
  --m3-inverse-on-surface: #f5eff7;
  --m3-shadow: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.08);
  --m3-shadow-lg: 0 8px 18px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.08);
  --m3-radius-xs: 8px;
  --m3-radius-sm: 12px;
  --m3-radius-md: 16px;
  --m3-radius-lg: 24px;
  --m3-radius-xl: 28px;
  --m3-font: Inter, Roboto, "Segoe UI", system-ui, sans-serif;
}

html, body {
  font-family: var(--m3-font);
  background: var(--m3-background);
  color: var(--m3-on-background);
}

a {
  color: var(--m3-primary);
  text-decoration: none;
}

a:hover {
  color: var(--m3-on-primary-container);
}

img {
  max-width: 100%;
  height: auto;
}

/* Migrated from stylesheet/theme-material-ish.css */
/* material3-ish-bootstrap-theme.css */
/* подключать ПОСЛЕ Bootstrap 5.3.x */
/* =========================================================
   1) TONAL PALETTES (seed: #734B34)
   - это приближение к M3 tonal palettes (0..100)
   - ключевые тоны: 10/20/30/40/80/90/95/99/100
   ========================================================= */
/* Primary (brown/orange) */
:root {
  --m3-ref-primary-10: #2E1505;
  --m3-ref-primary-20: #47220A;
  --m3-ref-primary-30: #593012;
  --m3-ref-primary-40: #6B3817; /* близко к seed */
  --m3-ref-primary-50: #7E4B2B;
  --m3-ref-primary-60: #926142;
  --m3-ref-primary-70: #A77A5B;
  --m3-ref-primary-80: #BE9677;
  --m3-ref-primary-90: #EFD9CD;
  --m3-ref-primary-95: #F7ECE6;
  --m3-ref-primary-99: #FFFBF9;
  --m3-ref-primary-100: #FFFFFF;
  /* Secondary (приглушённый тот же hue) */
  --m3-ref-secondary-10: #231A14;
  --m3-ref-secondary-20: #3A2E27;
  --m3-ref-secondary-30: #4E4038;
  --m3-ref-secondary-40: #62534B;
  --m3-ref-secondary-50: #77675E;
  --m3-ref-secondary-60: #8D7D74;
  --m3-ref-secondary-70: #A4948A;
  --m3-ref-secondary-80: #BCADA2;
  --m3-ref-secondary-90: #E9DDD5;
  --m3-ref-secondary-95: #F4EEEA;
  --m3-ref-secondary-99: #FFFBF9;
  --m3-ref-secondary-100: #FFFFFF;
  /* --- TONAL PALETTE: TERTIARY (harmonized teal) --- */
  --m3-ref-tertiary-10: #002E2E;
  --m3-ref-tertiary-20: #003C3C;
  --m3-ref-tertiary-30: #004949;
  --m3-ref-tertiary-40: #005A5A;
  --m3-ref-tertiary-50: #1C6E6E;
  --m3-ref-tertiary-60: #378585;
  --m3-ref-tertiary-70: #549C9C;
  --m3-ref-tertiary-80: #74B5B5;
  --m3-ref-tertiary-90: #CDEEEE;
  --m3-ref-tertiary-95: #E6F7F7;
  --m3-ref-tertiary-99: #F4FFFF;
  --m3-ref-tertiary-100: #FFFFFF;
  /* Neutral (surface) */
  --m3-ref-neutral-4: #0F0D0B;
  --m3-ref-neutral-6: #141110;
  --m3-ref-neutral-10: #1D1917;
  --m3-ref-neutral-12: #211D1B;
  --m3-ref-neutral-17: #2B2623;
  --m3-ref-neutral-20: #312C29;
  --m3-ref-neutral-22: #36302D;
  --m3-ref-neutral-24: #3A3431;
  --m3-ref-neutral-30: #47413D;
  --m3-ref-neutral-40: #5F5853;
  --m3-ref-neutral-50: #78706A;
  --m3-ref-neutral-60: #928A83;
  --m3-ref-neutral-70: #ADA59D;
  --m3-ref-neutral-80: #C9C0B7;
  --m3-ref-neutral-87: #DDD3CB;
  --m3-ref-neutral-90: #E7DDD5;
  --m3-ref-neutral-92: #EEE4DC;
  --m3-ref-neutral-94: #F2E9E2;
  --m3-ref-neutral-95: #F4ECE6;
  --m3-ref-neutral-96: #F7F0EA;
  --m3-ref-neutral-98: #FBF7F4;
  --m3-ref-neutral-99: #FDFBFA;
  --m3-ref-neutral-100: #FFFFFF;
  /* Neutral-variant (для surfaceVariant/outlineVariant) */
  --m3-ref-neutral-variant-30: #4D433D;
  --m3-ref-neutral-variant-50: #7B6F68;
  --m3-ref-neutral-variant-60: #948780;
  --m3-ref-neutral-variant-80: #C7BCB6;
  --m3-ref-neutral-variant-90: #E7DDD7;
  /* Error (оставим близко к M3) */
  --m3-ref-error-20: #601410;
  --m3-ref-error-30: #8C1D18;
  --m3-ref-error-40: #B3261E;
  --m3-ref-error-80: #F2B8B5;
  --m3-ref-error-90: #F9DEDC;
  --m3-ref-error-95: #FCEEEE;
  --m3-ref-error-100: #FFFFFF;
}

/* =========================================================
   2) SYSTEM ROLES (Material 3-ish) + Bootstrap mapping
   ========================================================= */
/* -------- LIGHT -------- */
:root,
[data-bs-theme=light] {
  /* Core roles */
  --md-sys-color-primary: var(--m3-ref-primary-40);
  --md-sys-color-on-primary: var(--m3-ref-primary-100);
  --md-sys-color-primary-container: var(--m3-ref-primary-90);
  --md-sys-color-on-primary-container: var(--m3-ref-primary-10);
  --md-sys-color-secondary: var(--m3-ref-secondary-40);
  --md-sys-color-on-secondary: var(--m3-ref-secondary-100);
  --md-sys-color-secondary-container: var(--m3-ref-secondary-90);
  --md-sys-color-on-secondary-container: var(--m3-ref-secondary-10);
  --md-sys-color-tertiary: var(--m3-ref-tertiary-40);
  --md-sys-color-on-tertiary: var(--m3-ref-tertiary-100);
  --md-sys-color-tertiary-container: var(--m3-ref-tertiary-90);
  --md-sys-color-on-tertiary-container: var(--m3-ref-tertiary-10);
  --md-sys-color-error: var(--m3-ref-error-40);
  --md-sys-color-on-error: var(--m3-ref-error-100);
  --md-sys-color-error-container: var(--m3-ref-error-90);
  --md-sys-color-on-error-container: var(--m3-ref-error-10);
  /* Surfaces */
  --md-sys-color-background: var(--m3-ref-neutral-99);
  --md-sys-color-on-background: var(--m3-ref-neutral-10);
  --md-sys-color-surface: var(--m3-ref-neutral-99);
  --md-sys-color-on-surface: var(--m3-ref-neutral-10);
  --md-sys-color-surface-variant: var(--m3-ref-neutral-variant-90);
  --md-sys-color-on-surface-variant: var(--m3-ref-neutral-variant-30);
  --md-sys-color-outline: var(--m3-ref-neutral-variant-50);
  --md-sys-color-outline-variant: var(--m3-ref-neutral-variant-80);
  /* Inverse */
  --md-sys-color-inverse-surface: var(--m3-ref-neutral-20);
  --md-sys-color-inverse-on-surface: var(--m3-ref-neutral-95);
  --md-sys-color-inverse-primary: var(--m3-ref-primary-80);
  /* Elevation-ish surface containers */
  --md-sys-color-surface-dim: var(--m3-ref-neutral-87);
  --md-sys-color-surface-bright: var(--m3-ref-neutral-98);
  --md-sys-color-surface-container-lowest: var(--m3-ref-neutral-100);
  --md-sys-color-surface-container-low: var(--m3-ref-neutral-96);
  --md-sys-color-surface-container: var(--m3-ref-neutral-94);
  --md-sys-color-surface-container-high: var(--m3-ref-neutral-92);
  --md-sys-color-surface-container-highest:var(--m3-ref-neutral-90);
  /* Surface tint (M3 magic для “elevation overlay”) */
  --md-sys-color-surface-tint: var(--md-sys-color-primary);
  /* Scrim for modals/backdrops */
  --md-sys-color-scrim: #000;
  /* ----- Bootstrap mapping ----- */
  --bs-primary: var(--md-sys-color-primary);
  --bs-secondary: var(--md-sys-color-secondary);
  --bs-danger: var(--md-sys-color-error);
  --bs-info: var(--md-sys-color-tertiary); /* удобно: info = tertiary */
  --bs-body-bg: var(--md-sys-color-surface);
  --bs-body-color: var(--md-sys-color-on-surface);
  --bs-border-color: var(--md-sys-color-outline-variant);
  --bs-secondary-color: var(--md-sys-color-on-surface-variant);
  --bs-link-color: var(--md-sys-color-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--md-sys-color-primary) 86%, black);
  /* Subtle backgrounds (BS helpers) */
  --bs-primary-bg-subtle: var(--md-sys-color-primary-container);
  --bs-secondary-bg-subtle:var(--md-sys-color-secondary-container);
  --bs-danger-bg-subtle: var(--md-sys-color-error-container);
  --bs-info-bg-subtle: var(--md-sys-color-tertiary-container);
  /* Component surfaces */
  --bs-card-bg: var(--md-sys-color-surface-container-low);
  --bs-dropdown-bg: var(--md-sys-color-surface-container);
  --bs-modal-bg: var(--md-sys-color-surface-container-lowest);
  --bs-popover-bg: var(--md-sys-color-surface-container);
  --bs-toast-background-color: var(--md-sys-color-surface-container);
  /* Focus ring */
  --bs-focus-ring-color: color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
  /* Modal backdrop like scrim */
  --bs-backdrop-bg: var(--md-sys-color-scrim);
  --bs-backdrop-opacity: .56;
}

/* -------- DARK -------- */
[data-bs-theme=dark] {
  /* Core roles (M3 canonical mapping: primary 80, onPrimary 20, container 30, onContainer 90) */
  --md-sys-color-primary: var(--m3-ref-primary-80);
  --md-sys-color-on-primary: var(--m3-ref-primary-20);
  --md-sys-color-primary-container: var(--m3-ref-primary-30);
  --md-sys-color-on-primary-container: var(--m3-ref-primary-90);
  --md-sys-color-secondary: var(--m3-ref-secondary-80);
  --md-sys-color-on-secondary: var(--m3-ref-secondary-20);
  --md-sys-color-secondary-container: var(--m3-ref-secondary-30);
  --md-sys-color-on-secondary-container: var(--m3-ref-secondary-90);
  --md-sys-color-tertiary: var(--m3-ref-tertiary-80);
  --md-sys-color-on-tertiary: var(--m3-ref-tertiary-20);
  --md-sys-color-tertiary-container: var(--m3-ref-tertiary-30);
  --md-sys-color-on-tertiary-container: var(--m3-ref-tertiary-90);
  --md-sys-color-error: var(--m3-ref-error-80);
  --md-sys-color-on-error: var(--m3-ref-error-20);
  --md-sys-color-error-container: var(--m3-ref-error-30);
  --md-sys-color-on-error-container: var(--m3-ref-error-90);
  --md-sys-color-background: var(--m3-ref-neutral-10);
  --md-sys-color-on-background: var(--m3-ref-neutral-90);
  --md-sys-color-surface: var(--m3-ref-neutral-10);
  --md-sys-color-on-surface: var(--m3-ref-neutral-90);
  --md-sys-color-surface-variant: var(--m3-ref-neutral-variant-30);
  --md-sys-color-on-surface-variant: var(--m3-ref-neutral-variant-80);
  --md-sys-color-outline: var(--m3-ref-neutral-variant-60);
  --md-sys-color-outline-variant: var(--m3-ref-neutral-variant-30);
  --md-sys-color-inverse-surface: var(--m3-ref-neutral-90);
  --md-sys-color-inverse-on-surface: var(--m3-ref-neutral-20);
  --md-sys-color-inverse-primary: var(--m3-ref-primary-40);
  /* Surface containers (dark canonical-ish) */
  --md-sys-color-surface-dim: var(--m3-ref-neutral-6);
  --md-sys-color-surface-bright: var(--m3-ref-neutral-24);
  --md-sys-color-surface-container-lowest: var(--m3-ref-neutral-4);
  --md-sys-color-surface-container-low: var(--m3-ref-neutral-10);
  --md-sys-color-surface-container: var(--m3-ref-neutral-12);
  --md-sys-color-surface-container-high: var(--m3-ref-neutral-17);
  --md-sys-color-surface-container-highest:var(--m3-ref-neutral-22);
  --md-sys-color-surface-tint: var(--md-sys-color-primary);
  --md-sys-color-scrim: #000;
  /* Bootstrap mapping */
  --bs-primary: var(--md-sys-color-primary);
  --bs-secondary: var(--md-sys-color-secondary);
  --bs-danger: var(--md-sys-color-error);
  --bs-info: var(--md-sys-color-tertiary);
  --bs-body-bg: var(--md-sys-color-surface);
  --bs-body-color: var(--md-sys-color-on-surface);
  --bs-border-color: var(--md-sys-color-outline-variant);
  --bs-secondary-color: var(--md-sys-color-on-surface-variant);
  --bs-link-color: var(--md-sys-color-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--md-sys-color-primary) 82%, white);
  --bs-primary-bg-subtle: var(--md-sys-color-primary-container);
  --bs-secondary-bg-subtle:var(--md-sys-color-secondary-container);
  --bs-danger-bg-subtle: var(--md-sys-color-error-container);
  --bs-info-bg-subtle: var(--md-sys-color-tertiary-container);
  --bs-card-bg: var(--md-sys-color-surface-container-low);
  --bs-dropdown-bg: var(--md-sys-color-surface-container);
  --bs-modal-bg: var(--md-sys-color-surface-container-lowest);
  --bs-popover-bg: var(--md-sys-color-surface-container);
  --bs-toast-background-color: var(--md-sys-color-surface-container);
  --bs-focus-ring-color: color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
  --bs-backdrop-bg: var(--md-sys-color-scrim);
  --bs-backdrop-opacity: .60;
}

/* =========================================================
   3) Buttons (важно! BS btn-* не всегда берёт цвет из --bs-primary)
   ========================================================= */
.btn-primary {
  --bs-btn-color: var(--md-sys-color-on-primary);
  --bs-btn-bg: var(--md-sys-color-primary);
  --bs-btn-border-color: var(--md-sys-color-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--md-sys-color-primary) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--md-sys-color-primary) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--md-sys-color-primary) 80%, black);
}

.btn-outline-primary {
  --bs-btn-color: var(--md-sys-color-primary);
  --bs-btn-border-color: var(--md-sys-color-primary);
  --bs-btn-hover-bg: var(--md-sys-color-primary);
  --bs-btn-hover-border-color: var(--md-sys-color-primary);
  --bs-btn-hover-color: var(--md-sys-color-on-primary);
}

/* Tertiary buttons (как M3 tertiary action) */
.btn-tertiary {
  --bs-btn-color: var(--md-sys-color-on-tertiary);
  --bs-btn-bg: var(--md-sys-color-tertiary);
  --bs-btn-border-color: var(--md-sys-color-tertiary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--md-sys-color-tertiary) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--md-sys-color-tertiary) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 80%, black);
}

.btn-outline-tertiary {
  --bs-btn-color: var(--md-sys-color-tertiary);
  --bs-btn-border-color: var(--md-sys-color-tertiary);
  --bs-btn-hover-bg: var(--md-sys-color-tertiary);
  --bs-btn-hover-border-color: var(--md-sys-color-tertiary);
  --bs-btn-hover-color: var(--md-sys-color-on-tertiary);
}

/* =========================================================
   4) SurfaceTint / Elevation overlay (M3 vibe без новых компонентов)
   - Используй на карточках/панелях: class="m3-elev-1" и т.п.
   ========================================================= */
.m3-elev-0 {
  background: var(--md-sys-color-surface-container-lowest) !important;
}

.m3-elev-1 {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 92%, var(--md-sys-color-surface-tint)) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.m3-elev-2 {
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 90%, var(--md-sys-color-surface-tint)) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.m3-elev-3 {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, var(--md-sys-color-surface-tint)) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.m3-elev-4 {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 86%, var(--md-sys-color-surface-tint)) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

/* маленькие утилиты */
.text-on-surface-variant {
  color: var(--md-sys-color-on-surface-variant) !important;
}

.border-outline {
  border-color: var(--md-sys-color-outline) !important;
}

.border-outline-variant {
  border-color: var(--md-sys-color-outline-variant) !important;
}

.bg-surface {
  background: var(--md-sys-color-surface) !important;
}

.bg-surface-variant {
  background: var(--md-sys-color-surface-variant) !important;
}

/* ===== Material-ish list group ===== */
.list-group {
  --bs-list-group-bg: var(--md-sys-color-surface-container-low);
  --bs-list-group-border-color: var(--md-sys-color-outline-variant);
}

.list-group-item {
  --bs-list-group-bg: var(--md-sys-color-surface-container-low);
  --bs-list-group-border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}

.list-group-item:hover {
  background: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-surface-tint) 6%);
}

.list-group-item.active {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border-color: var(--md-sys-color-tertiary);
}

/* ===== M3 outline-secondary ===== */
.btn-outline-secondary {
  --bs-btn-color: var(--md-sys-color-on-surface);
  --bs-btn-border-color: var(--md-sys-color-outline);
  --bs-btn-bg: transparent;
}

.btn-outline-secondary:hover {
  --bs-btn-bg: var(--md-sys-color-secondary-container);
  --bs-btn-border-color: var(--md-sys-color-secondary);
  --bs-btn-color: var(--md-sys-color-on-secondary-container);
}

.btn-outline-secondary:active {
  --bs-btn-bg: var(--md-sys-color-secondary);
  --bs-btn-border-color: var(--md-sys-color-secondary);
  --bs-btn-color: var(--md-sys-color-on-secondary);
}

/* =========================================================
   M3 "state layer" opacities + helper mix
   ========================================================= */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --m3-state-hover: .08;
  --m3-state-focus: .12;
  --m3-state-pressed: .12;
  --m3-state-selected: .16;
  /* state-layer base colors */
  --m3-state-on-surface: var(--md-sys-color-on-surface);
  --m3-state-primary: var(--md-sys-color-primary);
  --m3-state-secondary: var(--md-sys-color-secondary);
  --m3-state-tertiary: var(--md-sys-color-tertiary);
}

/* Generic helpers (optional, for custom components) */
.m3-state-hover-primary:hover {
  background: color-mix(in srgb, transparent, var(--m3-state-primary) calc(var(--m3-state-hover) * 100%)) !important;
}

.m3-state-hover-on-surface:hover {
  background: color-mix(in srgb, transparent, var(--m3-state-on-surface) calc(var(--m3-state-hover) * 100%)) !important;
}

/* =========================================================
   M3 Elevation overlays (surfaceTint)
   Use: class="card m3-elev-1" etc.
   ========================================================= */
.m3-elev-0 {
  background: var(--md-sys-color-surface-container-lowest) !important;
}

.m3-elev-1 {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 92%, var(--md-sys-color-surface-tint) 8%) !important;
}

.m3-elev-2 {
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 90%, var(--md-sys-color-surface-tint) 10%) !important;
}

.m3-elev-3 {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, var(--md-sys-color-surface-tint) 12%) !important;
}

.m3-elev-4 {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 86%, var(--md-sys-color-surface-tint) 14%) !important;
}

/* Make BS card default closer to M3 */
.card {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-outline-variant);
}

/* =========================================================
   List group — M3 interaction model
   ========================================================= */
.list-group {
  --bs-list-group-bg: var(--md-sys-color-surface-container-low);
  --bs-list-group-border-color: var(--md-sys-color-outline-variant);
}

.list-group-item {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  position: relative;
}

/* hover: on-surface state layer */
.list-group-item:hover {
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 92%, var(--m3-state-on-surface) 8%);
}

/* focus: clearer layer + outline */
.list-group-item:focus {
  outline: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 88%, var(--m3-state-primary) 12%);
}

/* pressed (active click) */
.list-group-item:active {
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 88%, var(--m3-state-on-surface) 12%);
}

/* selected (active class): tonal tertiary container */
.list-group-item.active {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 55%, var(--md-sys-color-outline-variant));
}

/* =========================================================
   Outline secondary — Google/M3 style
   ========================================================= */
.btn-outline-secondary {
  --bs-btn-color: var(--md-sys-color-on-surface);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--md-sys-color-outline);
  --bs-btn-hover-color: var(--md-sys-color-on-surface);
  --bs-btn-hover-bg: color-mix(in srgb, transparent, var(--m3-state-on-surface) 8%);
  --bs-btn-hover-border-color: var(--md-sys-color-outline);
  --bs-btn-focus-shadow-rgb: 0,0,0; /* bootstrap internal */
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, transparent, var(--m3-state-primary) 12%);
}

.btn-outline-secondary:active {
  --bs-btn-bg: color-mix(in srgb, transparent, var(--m3-state-on-surface) 12%);
  --bs-btn-border-color: var(--md-sys-color-outline);
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  opacity: 0.38; /* M3 disabled vibe */
}

/* =========================================================
   Nav / dropdown active = tonal container
   ========================================================= */
.nav-pills .nav-link {
  color: var(--md-sys-color-on-surface-variant);
}

.nav-pills .nav-link:hover {
  background: color-mix(in srgb, transparent, var(--m3-state-on-surface) 8%);
  color: var(--md-sys-color-on-surface);
}

.nav-pills .nav-link.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.dropdown-menu {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant);
}

.dropdown-item {
  color: var(--md-sys-color-on-surface);
}

.dropdown-item:hover {
  background: color-mix(in srgb, transparent, var(--m3-state-on-surface) 8%);
}

.dropdown-item:active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* =========================================================
   Forms: focus ring + subtle state layer
   ========================================================= */
.form-control, .form-select {
  border-color: var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}

.form-control:focus, .form-select:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, transparent, var(--m3-state-primary) 12%);
  background-color: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, var(--m3-state-primary) 8%);
}

/* =========================================================
   M3 Links (Google-like)
   ========================================================= */
/* Базовая ссылка */
a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Hover — мягкое затемнение + state layer */
a:hover {
  color: color-mix(in srgb, var(--md-sys-color-primary) 85%, black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Focus — Google style outline */
a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Active (pressed) */
a:active {
  color: color-mix(in srgb, var(--md-sys-color-primary) 75%, black);
}

/* Disabled-like links (если используешь .disabled) */
a.disabled,
a[aria-disabled=true] {
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
}

/* =========================================================
   Links inside lists (navigation vibe)
   ========================================================= */
li > a {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--md-sys-color-on-surface);
}

li > a:hover {
  background: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 8%);
  text-decoration: none;
}

li > a:active {
  background: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
}

/* =========================================================
   Remove "default blue" focus/caret in dropdowns & selects
   ========================================================= */
/* 1) Текстовый курсор (caret) — если “синий курсор” именно I-beam в поле */
.form-control,
.form-select,
.dropdown-toggle,
input,
textarea {
  caret-color: var(--md-sys-color-primary);
}

/* 2) Focus outline/box-shadow у select и любых форм-контролов */
.form-select:focus,
.form-control:focus {
  border-color: var(--md-sys-color-primary);
  outline: 0;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, transparent, var(--md-sys-color-primary) 12%);
}

/* 3) Если синий появляется из-за системной подсветки (webkit) */
.form-select:focus-visible,
.form-control:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent);
  outline-offset: 2px;
}

/* 4) Bootstrap dropdown items (меню): фокус/hover/active */
.dropdown-item:focus,
.dropdown-item:focus-visible {
  background: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
  color: var(--md-sys-color-on-surface);
  outline: none;
}

.dropdown-item:hover {
  background: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 8%);
}

.dropdown-item:active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* 5) Если это <option> внутри <select> и там синяя подсветка выбранного
   (часть браузеров ограничивает стилизацию option, но пробуем) */
select option:checked {
  background: color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-surface)) !important;
  color: var(--md-sys-color-on-surface) !important;
}

/* 6) Safari/Chrome иногда рисуют “синий” внутренний glow — убираем */
.form-select,
.form-control {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   M3 Custom Select (Google-like) over native <select>
   ========================================================= */
.m3-select, select {
  position: relative;
  display: inline-block;
  width: 100%;
  font: inherit;
}

.m3-select__button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.375rem 2.75rem; /* close to form-select-sm */
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.m3-select__button:hover {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, var(--md-sys-color-on-surface) 8%);
}

.m3-select__button:focus-visible {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, transparent, var(--md-sys-color-primary) 12%);
}

.m3-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m3-select__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 0.9;
  color: var(--md-sys-color-on-surface-variant);
}

/* Panel */
.m3-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1080; /* above most things, below modal (1055) already, but safe */
  padding: 6px;
  border-radius: 16px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 18px 50px color-mix(in srgb, black 22%, transparent);
  display: none;
}

.m3-select[data-open=true] .m3-select__menu, select[data-open=true] .m3-select__menu {
  display: block;
}

/* Items */
.m3-select__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.m3-select__item:hover {
  background: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 8%);
}

.m3-select__item:active {
  background: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
}

.m3-select__item[aria-selected=true] {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.m3-select__check {
  width: 18px;
  height: 18px;
  opacity: 0;
}

.m3-select__item[aria-selected=true] .m3-select__check {
  opacity: 1;
}

/* Search (optional) */
.m3-select__search {
  width: 100%;
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  outline: none;
  margin-bottom: 6px;
}

.m3-select__search:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, transparent, var(--md-sys-color-primary) 12%);
}

/* Hide native select but keep it for forms/a11y */
.m3-select__native {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* =========================================================
   M3 menu open animation (no padding changes)
   ========================================================= */
.m3-select__menu {
  transform-origin: top;
  transform: translateY(-4px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform 140ms ease, opacity 140ms ease;
}

.m3-select[data-open=true] .m3-select__menu, select[data-open=true] .m3-select__menu {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Длинные строки: НЕ меняем padding, но предотвращаем “ломание” */
.m3-select__item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* если хочешь перенос — скажи, сделаю wrap-режим */
}

/* =========================================================
   Ripple effect (Google-like)
   ========================================================= */
.m3-select__item {
  position: relative;
  overflow: hidden; /* чтобы волна не вылезала */
}

.m3-ripple {
  position: absolute;
  border-radius: 999px;
  transform: scale(0);
  opacity: 0.18;
  pointer-events: none;
  /* цвет волны — как state layer on-surface (и в dark тоже норм) */
  background: var(--md-sys-color-on-surface);
  animation: m3-ripple 420ms ease-out;
}

@keyframes m3-ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}
.m3-surface, #top,
header .topbar,
.header-shell,
footer .footer-shell, .card, .panel, .well, .module, .list-group-item, .dropdown-menu, .m3-product-card, .product-thumb,
.product-layout .product-thumb,
.product-grid .product-thumb,
.product-list .product-thumb, .m3-section {
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-radius-lg);
  box-shadow: var(--m3-shadow);
}

.m3-surface--raised {
  box-shadow: var(--m3-shadow-lg);
}

.m3-section {
  padding: 1rem 1.25rem;
}

.m3-button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.m3-button:hover, .btn:hover {
  box-shadow: var(--m3-shadow);
}

.m3-button--filled, .btn-primary,
.btn-danger,
.btn-warning,
.btn-success {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
}

.m3-button--tonal {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}

.m3-button--outlined, .btn-default,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-light {
  background: transparent;
  color: var(--m3-primary);
  border-color: var(--m3-outline);
}

.m3-button--text, .btn-link {
  background: transparent;
  color: var(--m3-primary);
}

.m3-field, .form-control,
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=search],
input[type=number],
input[type=date],
.m3-select,
select,
.m3-textarea,
textarea {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--m3-outline);
  border-radius: 1rem;
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  padding: 1rem 0.875rem 0.625rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.m3-field:focus, .form-control:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=date]:focus,
.m3-select:focus,
select:focus,
.m3-textarea:focus,
textarea:focus {
  outline: 0;
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--m3-primary) 18%, transparent);
}

.m3-label, .form-label, label, .control-label, .input-group-text {
  display: inline-block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  color: var(--m3-on-surface-variant);
}

.m3-check, .form-check, .checkbox, .radio {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

.m3-product-card, .product-thumb,
.product-layout .product-thumb,
.product-grid .product-thumb,
.product-list .product-thumb {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.m3-product-card__media, .product-thumb .image,
.product-layout .image {
  background: var(--m3-surface-container);
  padding: 1rem;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
}

.m3-product-card__body, .product-thumb .caption,
.product-thumb .content,
.product-layout .caption {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.m3-price, .price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-weight: 700;
}

.m3-price .price-old, .price .price-old {
  color: var(--m3-on-surface-variant);
  text-decoration: line-through;
  font-weight: 500;
}

.m3-rating, .rating {
  color: #ffb400;
  letter-spacing: 0.1em;
}

.m3-chip, .badge, .label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--m3-secondary-container);
  color: var(--m3-on-surface);
  font-size: 0.875rem;
  font-weight: 600;
}

.m3-table, .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--m3-radius-lg);
  background: var(--m3-surface);
}

.m3-table th, .table th,
.m3-table td,
.table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--m3-outline-variant);
}

.m3-table thead th, .table thead th {
  background: var(--m3-surface-container);
  color: var(--m3-on-surface);
}

.m3-alert, .alert {
  border-radius: var(--m3-radius-md);
  padding: 0.875rem 1rem;
  border: 1px solid var(--m3-outline-variant);
  background: var(--m3-surface-container);
}

.m3-alert--success, .alert-success {
  background: #dff4e4;
}

.m3-alert--danger, .alert-danger {
  background: var(--m3-error-container);
}

.m3-alert--warning, .alert-warning {
  background: #fff0c2;
}


.m3-dropdown,
.dropdown {
  position: relative;
}

.m3-dropdown-menu,
.dropdown-menu {
  --m3-dropdown-min-width: 240px;
  min-width: var(--m3-dropdown-min-width);
  margin: 0.5rem 0 0;
  padding: 0.5rem;
  border: 0;
  border-radius: 1rem;
  background: var(--m3-surface);
  box-shadow: var(--m3-shadow-lg);
}

.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
}

.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}

.m3-dropdown-item,
.dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--m3-on-surface);
  text-decoration: none;
}

.m3-dropdown-item:hover,
.m3-dropdown-item:focus-visible,
.dropdown-item:hover,
.dropdown-item:focus-visible,
.dropdown-item:active,
.dropdown-item.active {
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface);
}

.dropdown-divider {
  margin: 0.375rem 0;
  border-top-color: var(--m3-outline-variant);
}

/* Migrated from stylesheet/material-m3-mapping.css */
/* Material-ish mapping layer for Bootstrap 5 components
   This file does not replace theme-material-ish.css; it normalizes
   common Bootstrap/OpenCart components so they visually sit closer to M3. */
:root {
  --m3-radius-xs: .5rem;
  --m3-radius-sm: .75rem;
  --m3-radius-md: 1rem;
  --m3-radius-lg: 1.25rem;
  --m3-shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
}

.card,
.list-group-item,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.modal-content,
.accordion-item,
.alert,
.input-group-text,
.pagination .page-link,
.breadcrumb,
.toast {
  border-radius: var(--m3-radius-sm);
}

.card,
.dropdown-menu,
.modal-content,
.accordion-item,
.toast {
  box-shadow: var(--m3-shadow-1);
}

.card .card-header,
.accordion-button,
.modal-header,
.list-group-item.active {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.card .card-footer,
.modal-footer {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.btn {
  border-radius: 999px;
  font-weight: 500;
  padding-inline: 1rem;
}

.btn-sm {
  padding-inline: 0.75rem;
}

.btn-lg {
  padding-inline: 1.25rem;
}

.form-control,
.form-select,
.input-group-text {
  min-height: calc(1.5em + 0.95rem + 2px);
}

.form-control:focus,
.form-select:focus,
.btn:focus,
.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
}

.form-check-input,
.form-check-input[type=checkbox],
.form-check-input[type=radio] {
  border-radius: 0.35rem;
}

.form-check-input[type=radio] {
  border-radius: 50%;
}

.accordion-item {
  overflow: hidden;
}

.accordion-button {
  border-radius: 0;
}

.dropdown-menu {
  padding: 0.5rem;
}

.dropdown-item {
  border-radius: 0.75rem;
}

.list-group {
  gap: 0.375rem;
}

.list-group-item {
  border: 1px solid var(--bs-border-color);
}

.alert {
  border: 0;
}

.breadcrumb {
  padding: 0.625rem 0.875rem;
}

.table > :not(caption) > * > * {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

/* Legacy BS3 aliases styled to match BS5/M3 better */
.panel {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--m3-radius-sm);
  background: var(--bs-body-bg);
  box-shadow: var(--m3-shadow-1);
}

.panel-heading {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 500;
}

.panel-body {
  padding: 1rem;
}

.panel-footer {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.well {
  border-radius: var(--m3-radius-sm);
  padding: 1rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color);
}

.btn-default {
  color: var(--bs-body-color);
  background: var(--bs-light);
  border-color: var(--bs-border-color);
}

.btn-default:hover {
  background: var(--bs-secondary-bg);
}

.control-label {
  margin-bottom: 0.375rem;
  font-weight: 500;
}

.help-block {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

/* Additional BS5 form mapping after full Twig refactor */
.form-check {
  margin-bottom: 0.5rem;
}

.form-check .form-check-input {
  float: none;
  margin-right: 0.5rem;
}

.form-check .form-check-label {
  display: inline;
}

.col-form-label.fw-semibold {
  font-weight: 600 !important;
}

.badge {
  font-weight: 500;
}

.btn.oc-added-success {
  background-color: var(--m3-success, #2e7d32) !important;
  border-color: var(--m3-success, #2e7d32) !important;
  color: #fff !important;
  transition: all 0.2s ease;
}
.btn.oc-added-success i {
  margin-right: 4px;
}

/* Migrated from stylesheet/bs5-theme.css */
/* OpenCart BS5 theme: minimal tweaks + tiny compatibility helpers */
/* --- Layout helpers --- */
body {
  padding-top: 0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Alerts spacing */
.alert {
  margin-bottom: 1rem;
}

/* Breadcrumbs */
.breadcrumb {
  margin-bottom: 1rem;
}

/* Product cards */
.product-thumb {
  height: 100%;
}

.product-thumb .image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Small compatibility for old OC markup/classes (keep minimal) */
.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

/* OC default footer */
footer {
  margin-top: 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Fix list-group spacing in sidebar */
.list-group-item > a {
  display: block;
}

/* Input group buttons alignment */
.input-group .btn {
  white-space: nowrap;
}

.m3-shell {
  background: var(--m3-background);
  color: var(--m3-on-background);
}

.m3-shell__topbar {
  background: var(--m3-surface-container-low);
  border-bottom: 1px solid var(--m3-outline-variant);
}

.m3-shell__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding-block: 0.25rem;
}

.m3-shell__topbar-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.m3-header {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
}

.m3-header__brand,
.m3-header__logo {
  min-width: 0;
}

.m3-header__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.m3-header__logo img {
  display: block;
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
}

.m3-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.m3-icon-button,
.m3-header__action,
.m3-header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 999px;
  background: var(--m3-surface-container);
  color: var(--m3-on-surface);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m3-outline) 50%, transparent);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.m3-icon-button:hover,
.m3-header__action:hover,
.m3-header__icon:hover {
  background: var(--m3-surface-container-high);
  box-shadow: var(--m3-shadow);
}

.m3-icon-button .badge,
.m3-header__action .badge,
.m3-header__icon .badge {
  position: absolute;
  top: 4px;
  right: 4px;
}

.m3-header__action-label {
  white-space: nowrap;
}

.m3-nav-shell {
  border-top: 1px solid var(--m3-outline-variant);
  border-bottom: 1px solid var(--m3-outline-variant);
  background: color-mix(in srgb, var(--m3-surface-container-low) 65%, white);
}

.m3-nav,
.navbar-nav.m3-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0.625rem 0;
}

.m3-nav > .nav-item,
.m3-nav__item {
  position: relative;
  list-style: none;
}

.m3-nav .nav-link,
.m3-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.625rem 0.875rem;
  border-radius: 999px;
  color: var(--m3-on-surface);
  text-decoration: none;
  font-weight: 500;
}

.m3-nav .nav-link:hover,
.m3-nav .nav-link:focus-visible,
.m3-nav__link:hover,
.m3-nav__link:focus-visible {
  background: var(--m3-surface-container-high);
}

.m3-nav .dropdown-toggle::after {
  margin-left: 0.375rem;
}

.m3-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--m3-surface-container-high);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m3-outline) 60%, transparent);
}

.m3-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--m3-on-surface-variant);
  flex: 0 0 auto;
}

.m3-search .form-control,
.m3-search input[type=search],
.m3-search input[type=text] {
  min-width: 0;
  min-height: 48px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0.25rem;
}

.m3-search__submit {
  flex: 0 0 auto;
}

.m3-footer {
  margin-top: 3rem;
  padding-block: 2.5rem;
  background: var(--m3-surface-container-low);
  border-top: 1px solid var(--m3-outline-variant);
}

.m3-footer__title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
}

.m3-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.m3-footer__list li + li {
  margin-top: 0.625rem;
}

.m3-footer__bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--m3-outline-variant);
  color: var(--m3-on-surface-variant);
}

.m3-cart {
  min-width: min(380px, 100vw - 2rem);
  padding: 0.75rem;
}

.m3-cart__list {
  display: grid;
  gap: 0.75rem;
}

.m3-cart__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.5rem;
  border-radius: 1rem;
  background: var(--m3-surface-container-low);
}

.m3-cart__thumb img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 0.75rem;
}

.m3-cart__name {
  color: var(--m3-on-surface);
  text-decoration: none;
  font-weight: 600;
}

.m3-cart__meta {
  margin-top: 0.25rem;
  color: var(--m3-on-surface-variant);
  font-size: 0.875rem;
}

.m3-cart__total,
.m3-cart__totals {
  display: grid;
  gap: 0.5rem;
}

.m3-cart__total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.m3-cart__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.m3-cart__remove {
  min-width: 40px;
  min-height: 40px;
  padding-inline: 0.75rem;
}

.m3-cart__empty {
  color: var(--m3-on-surface-variant);
  margin: 0;
}

.m3-slideshow {
  position: relative;
  border-radius: var(--m3-radius-lg);
  overflow: hidden;
  background: var(--m3-surface-container);
  box-shadow: var(--m3-shadow);
}

.m3-slideshow .carousel-item img,
.m3-slideshow__image {
  display: block;
  width: 100%;
  height: auto;
}

.m3-slideshow .carousel-control-prev,
.m3-slideshow .carousel-control-next {
  width: 56px;
}

.m3-slideshow .carousel-control-prev-icon,
.m3-slideshow .carousel-control-next-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--m3-inverse-surface) 82%, transparent);
  background-size: 1rem 1rem;
}

.m3-slideshow .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  margin-inline: 4px;
  border-radius: 999px;
}

@media (max-width: 991.98px) {
  .m3-header {
    grid-template-columns: 1fr;
  }
  .m3-header__actions {
    justify-content: flex-start;
  }
  .m3-nav,
  .navbar-nav.m3-nav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
@media (max-width: 575.98px) {
  .m3-shell__topbar-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .m3-cart {
    min-width: min(100vw - 1rem, 360px);
  }
}
.m3-header__search {
  min-width: 0;
}

.m3-header__search .m3-search {
  width: 100%;
}

.m3-header__brand-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.m3-header__brand-subtitle {
  margin: 0.25rem 0 0;
  color: var(--m3-on-surface-variant);
  font-size: 0.875rem;
}

.m3-topbar-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.m3-topbar-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  color: var(--m3-on-surface-variant);
  text-decoration: none;
}

.m3-topbar-menu__link:hover,
.m3-topbar-menu__link:focus-visible {
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface);
}

.m3-header__cart .dropdown-menu,
#cart .dropdown-menu {
  margin-top: 0.5rem;
}

.btn-group,
.input-group {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > select {
  flex: 1 1 auto;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > select,
.input-group-sm > .input-group-text,
.btn-group-sm > .btn,
.btn-sm {
  min-height: 40px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.btn-close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
}

#top,
header .topbar,
.header-shell,
footer .footer-shell {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.breadcrumb > li,
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--m3-on-surface-variant);
}

.nav, .navbar-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nav > li > a,
.navbar-nav > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
}

.card,
.product-thumb,
.oc-specbox,
.table-responsive,
.list-group,
.pagination,
.buttons {
  border-radius: var(--m3-radius-md);
}

.card,
.product-thumb,
.oc-specbox,
.list-group,
.table-responsive {
  background: var(--m3-surface);
  box-shadow: var(--m3-shadow);
}

.card-body,
.card-header,
.card-footer,
 .oc-specbox{
  padding: 1rem;
}

.list-unstyled,
.list-group {
  padding-left: 0;
}

.text-muted,
.form-text,
small,
.small {
  color: var(--m3-on-surface-variant) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
hr {
  border-color: var(--m3-outline-variant) !important;
}

.rounded,
.rounded-3,
.rounded-4,
.img-thumbnail {
  border-radius: 1rem !important;
}

.img-thumbnail {
  padding: 0.25rem;
  background: var(--m3-surface-container-low);
  border: 1px solid var(--m3-outline-variant);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem;
}

.pagination a,
.pagination span,
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--m3-on-surface);
  text-decoration: none;
  background: var(--m3-surface-container-low);
}

.page-item.active .page-link,
.pagination .active span {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
}

.product-thumb .button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 1rem 1rem;
}

.checkout-cart .table-responsive,
.checkout-checkout .panel,
#collapse-checkout-option,
#collapse-payment-address,
#collapse-shipping-address,
#collapse-shipping-method,
#collapse-payment-method,
#collapse-checkout-confirm {
  border-radius: var(--m3-radius-lg);
}

.checkout-step-title,
.panel-heading {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.account-account .list-group,
.account-order .table-responsive,
.account-edit form,
.account-address .table-responsive {
  display: block;
}

.module .module-title,
.box-heading,
.section-title,
.card-header,
.product-thumb .caption h4,
.product-thumb .card-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.swiper,
.carousel,
.banner {
  border-radius: var(--m3-radius-lg);
  overflow: hidden;
}

.carousel-inner {
  border-radius: inherit;
}

.alert-dismissible {
  padding-right: 3.25rem;
}

.list-group-item {
  border: 0;
  border-bottom: 1px solid var(--m3-outline-variant);
}

.list-group-item:last-child {
  border-bottom: 0;
}

.table-responsive {
  padding: 0.25rem;
}

.product-thumb .button-group,
.product-layout .button-group,
.caption .button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.product-thumb .button-group .btn,
.product-layout .button-group .btn,
.caption .button-group .btn {
  flex: 1 1 auto;
}

#oc-toast-container .toast {
  border-radius: var(--m3-toast-radius, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
#oc-toast-container .toast * {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
#oc-toast-container .toast .toast-body {
  position: relative;
  overflow: hidden;
  border-radius: var(--m3-toast-radius, 1rem);
}
#oc-toast-container .toast .toast-body::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--m3-toast-radius, 1rem) 0 0 var(--m3-toast-radius, 1rem);
  background: linear-gradient(180deg, rgba(103, 80, 164, 0.92), rgba(103, 80, 164, 0.12));
}
#oc-toast-container .oc-toast-pop {
  transform-origin: top right;
}
#oc-toast-container .oc-cart-summary-block {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--m3-toast-radius, 1rem);
  padding: 0.85rem 1rem;
  margin-top: 0.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform-origin: center;
}
#oc-toast-container .oc-cart-accent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
#oc-toast-container .oc-cart-count,
#oc-toast-container .oc-cart-total {
  display: flex;
  flex-direction: column;
}
#oc-toast-container .oc-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  opacity: 0.55;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
#oc-toast-container .oc-value {
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.1;
}
#oc-toast-container .oc-cart-total .oc-value {
  color: var(--m3-primary, #6750a4);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #oc-toast-container .toast {
    background: #fff;
  }
}
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.hidden {
  display: none !important;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}


.m3-header__action,
.m3-cart__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: 999px;
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface);
  text-decoration: none;
  white-space: nowrap;
}

.m3-header__action:hover,
.m3-header__action:focus-visible,
.m3-cart__toggle:hover,
.m3-cart__toggle:focus-visible {
  background: var(--m3-surface-container-highest);
  color: var(--m3-on-surface);
}

.m3-header__action-label,
.m3-cart__toggle-label {
  font-weight: 500;
}

.m3-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0.25rem;
  color: var(--m3-on-surface);
}

.m3-search__input:focus {
  outline: none;
}

.m3-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  text-decoration: none;
}

.m3-search__submit:hover,
.m3-search__submit:focus-visible {
  background: color-mix(in srgb, var(--m3-primary) 90%, black);
  color: var(--m3-on-primary);
}

.m3-cart__aside {
  display: grid;
  gap: 0.5rem;
  justify-items: end;
}

.m3-nav__dropdown {
  padding: 0.5rem;
}

.m3-nav__dropdown-link {
  border-radius: 0.75rem;
}

.m3-navbar{position:relative}.m3-header{grid-template-columns:minmax(132px,220px) minmax(280px,1fr) auto}.m3-header__actions{flex-wrap:nowrap;white-space:nowrap}.m3-header__cart,.m3-cart-dropdown{position:relative}.m3-cart__toggle{min-width:180px}.m3-nav-shell{overflow:visible}.m3-nav-shell .container{overflow:visible}.m3-nav,.navbar-nav.m3-nav{position:relative;flex-wrap:nowrap;overflow:visible;scrollbar-width:none}.m3-nav::-webkit-scrollbar,.navbar-nav.m3-nav::-webkit-scrollbar{display:none}.m3-nav>.nav-item,.m3-nav__item{position:relative;flex:0 0 auto}.m3-nav .dropdown-menu,.m3-nav__dropdown{position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-start:0;z-index:1040;display:none;min-width:240px;max-width:min(320px,calc(100vw - 2rem));max-height:min(70vh,560px);overflow:auto;padding:.5rem;border:1px solid var(--m3-outline-variant);border-radius:1rem;background:var(--m3-surface);box-shadow:0 12px 32px rgba(0,0,0,.16)}.m3-nav .dropdown-menu.show,.m3-nav__dropdown.show{display:block}.m3-nav .dropdown-item,.m3-nav__dropdown-link{display:block;padding:.625rem .75rem;border-radius:.75rem;white-space:normal}.m3-nav .dropdown-divider{margin:.375rem 0;opacity:.12}.m3-cart.dropdown .dropdown-menu{inset-inline-start:auto;inset-inline-end:0}.m3-header__brand{display:flex;align-items:center}.m3-header__logo-link{max-width:100%}.m3-header__logo img{width:auto;max-width:clamp(120px,18vw,220px);max-height:64px;object-fit:contain}.m3-search{width:100%}.m3-search__submit{white-space:nowrap}@media (max-width:1199.98px){.m3-header{grid-template-columns:minmax(120px,180px) minmax(220px,1fr) auto}.m3-cart__toggle{min-width:52px;padding-inline:.75rem}}@media (max-width:991.98px){.m3-header{grid-template-columns:1fr}.m3-header__actions{flex-wrap:wrap;justify-content:flex-start}.m3-nav,.navbar-nav.m3-nav{flex-wrap:wrap;overflow-x:visible}.m3-nav .dropdown-menu,.m3-nav__dropdown{position:static;margin-top:.5rem;max-width:100%;max-height:none;box-shadow:none}}


.m3-navbar{position:relative}.m3-nav-shell{overflow:visible}.m3-nav-shell .container{overflow:visible}.m3-header{grid-template-columns:minmax(132px,220px) minmax(320px,640px) auto;justify-content:space-between}.m3-header__search{width:min(100%,640px);justify-self:center}.m3-header__actions{flex-wrap:nowrap;white-space:nowrap}.m3-header__cart,.m3-cart-dropdown{position:relative}.m3-cart__toggle{min-width:180px;justify-content:flex-start;padding-inline:1rem 1.125rem;background:var(--m3-surface-container-low);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m3-outline) 55%,transparent)}.m3-cart__toggle::after{margin-left:auto}.m3-search{min-height:58px;padding-inline:.5rem}.m3-search__icon{width:36px;height:36px;font-size:1rem}.m3-search__input{font-size:1rem;padding-inline:.125rem}.m3-search__submit{min-width:96px;padding-inline:1.125rem;font-weight:600}.m3-nav,.navbar-nav.m3-nav{position:relative;flex-wrap:nowrap;overflow:visible;scrollbar-width:none}.m3-nav::-webkit-scrollbar,.navbar-nav.m3-nav::-webkit-scrollbar{display:none}.m3-nav>.nav-item,.m3-nav__item{position:relative;flex:0 0 auto}.m3-nav .dropdown-menu,.m3-nav__dropdown{position:absolute;top:calc(100% + .5rem);left:0;z-index:1040;display:none;min-width:240px;max-width:min(320px,calc(100vw - 2rem));max-height:min(70vh,560px);overflow:auto;margin:0;list-style:none;border:1px solid var(--m3-outline-variant);border-radius:1rem;background:var(--m3-surface);box-shadow:0 12px 32px rgba(0,0,0,.16)}.m3-nav .dropdown-menu.show,.m3-nav__dropdown.show{display:block}.m3-nav .dropdown-item,.m3-nav__dropdown-link{display:block;padding:.625rem .75rem;border-radius:.75rem;white-space:normal}.m3-nav .dropdown-divider{margin:.375rem 0;opacity:.12}.m3-cart.dropdown .dropdown-menu,.m3-cart-dropdown .dropdown-menu{inset-inline-start:auto;inset-inline-end:0}.m3-cart{min-width:min(360px,calc(100vw - 2rem));padding:.875rem;border:1px solid var(--m3-outline-variant);border-radius:1rem;background:var(--m3-surface);box-shadow:0 12px 32px rgba(0,0,0,.16)}.m3-cart__empty{display:flex;align-items:center;gap:.625rem;margin:0;color:var(--m3-on-surface-variant)}.m3-header .bi,.m3-search .bi,.m3-cart .bi,.m3-cart__toggle .bi{font-size:1rem;line-height:1}@media (max-width:1199.98px){.m3-header{grid-template-columns:minmax(120px,180px) minmax(260px,1fr) auto}.m3-cart__toggle{min-width:52px;padding-inline:.75rem}}@media (max-width:991.98px){.m3-header{grid-template-columns:1fr}.m3-header__search{width:100%}.m3-header__actions{flex-wrap:wrap;justify-content:flex-start}.m3-nav,.navbar-nav.m3-nav{flex-wrap:wrap;overflow-x:visible}.m3-nav .dropdown-menu,.m3-nav__dropdown{position:static;margin-top:.5rem;max-width:100%;max-height:none;box-shadow:none}}


/* v5 header restore */
.m3-icon{width:20px;height:20px;display:inline-block;flex:0 0 auto}.m3-icon--sm{width:16px;height:16px}
.m3-shell__topbar{border-bottom:1px solid var(--m3-outline-variant)}
.m3-shell__topbar .container{display:flex;justify-content:flex-end}.m3-shell__topbar-inner{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px}.m3-topbar-menu{margin-left:auto;gap:1rem}.m3-topbar-menu__link{min-height:auto;padding:.25rem 0;border-radius:0;background:transparent;font-size:.95rem}
.m3-header{display:grid;grid-template-columns:minmax(120px,180px) minmax(360px,640px) auto;align-items:center;gap:1.25rem;padding-block:1rem}.m3-header__search{width:100%;max-width:640px;justify-self:center}.m3-header__actions{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;flex-wrap:nowrap}.m3-header__action--icon{width:48px;min-width:48px;padding:0}.m3-header__action--icon .m3-header__action-label{display:none!important}.m3-search{display:flex;align-items:center;gap:.5rem;min-height:56px;padding:.375rem .5rem .375rem 1rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--m3-outline) 60%,transparent);background:var(--m3-surface)}.m3-search__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--m3-on-surface-variant)}.m3-search__input{height:48px;padding-inline:.25rem;background:transparent;border:0}.m3-search__submit{height:44px;min-width:104px;padding-inline:1.25rem;border-radius:999px;background:var(--m3-primary);color:var(--m3-on-primary);font-weight:600}
.m3-header__cart,.m3-cart-dropdown{min-width:0}.m3-cart__toggle{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;min-height:48px;min-width:260px;padding:.75rem 1rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--m3-outline) 55%,transparent);background:var(--m3-surface)}.m3-cart__toggle::after{margin-left:auto}.m3-cart__toggle-label{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}.m3-cart{min-width:360px;max-width:min(420px,calc(100vw - 2rem))}
.m3-nav-shell{border-top:1px solid var(--m3-outline-variant)}.m3-navbar{position:relative}.m3-nav,.navbar-nav.m3-nav{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-block:.625rem}.m3-nav>.nav-item,.m3-nav__item{position:relative;flex:0 0 auto}.m3-nav .nav-link,.m3-nav__link{display:inline-flex;align-items:center;min-height:40px;padding:.5rem .875rem;border-radius:999px;color:var(--m3-on-surface);white-space:nowrap}.m3-nav .dropdown-menu,.m3-nav__dropdown{position:absolute;top:calc(100% + .375rem);left:0;display:none;min-width:220px;padding:.5rem;margin:0;list-style:none;border:1px solid var(--m3-outline-variant);border-radius:1rem;background:var(--m3-surface);box-shadow:0 12px 32px rgba(0,0,0,.16)}.m3-nav .dropdown-menu.show,.m3-nav__dropdown.show{display:block}.m3-nav .dropdown-item,.m3-nav__dropdown-link{display:block;padding:.625rem .75rem;border-radius:.75rem;white-space:normal}.m3-nav .dropdown-divider{margin:.375rem 0;opacity:.12}
@media (max-width:1199.98px){.m3-header{grid-template-columns:minmax(100px,150px) minmax(280px,1fr) auto}.m3-header__search{max-width:none}.m3-cart__toggle{min-width:52px;padding-inline:.75rem}.m3-cart__toggle-label{display:none!important}}
@media (max-width:991.98px){.m3-shell__topbar .container,.m3-shell__topbar-inner{display:block}.m3-topbar-menu{justify-content:flex-start;flex-wrap:wrap;gap:.75rem}.m3-header{grid-template-columns:1fr}.m3-header__search{max-width:none}.m3-header__actions{justify-content:flex-start;flex-wrap:wrap}.m3-cart__toggle{min-width:220px}.m3-nav,.navbar-nav.m3-nav{flex-wrap:wrap;overflow:visible}.m3-nav .dropdown-menu,.m3-nav__dropdown{position:static;box-shadow:none;min-width:100%}}


/* v6 header alignment */
.m3-header__action-label--desktop,.m3-cart__toggle-label--desktop{display:inline-flex;align-items:center;min-width:0}.m3-search{display:flex;align-items:center}.m3-search__input{flex:1 1 auto;min-width:0}.m3-search__submit{margin-left:auto;flex:0 0 auto}.m3-cart__toggle{display:flex;align-items:center;justify-content:flex-start;gap:.75rem}.m3-cart__toggle-label{display:inline-flex;align-items:center}.m3-header__actions{gap:.625rem}.m3-header__action--icon{display:inline-flex;align-items:center;justify-content:center}.m3-header__action--icon .m3-icon{width:18px;height:18px}.m3-cart__toggle .m3-icon{width:18px;height:18px}.m3-search__icon .m3-icon{width:18px;height:18px}@media (max-width:1199.98px){.m3-header__action-label--desktop,.m3-cart__toggle-label--desktop{display:none!important}}

/* v8 fix: nav dropdowns must not be clipped by horizontal scrolling */
.m3-navbar{overflow:visible}.m3-nav,.navbar-nav.m3-nav{overflow:visible!important;scrollbar-width:none}.m3-nav::-webkit-scrollbar,.navbar-nav.m3-nav::-webkit-scrollbar{display:none}.m3-nav>.nav-item,.m3-nav__item,.m3-nav .dropdown,.m3-nav__item--parent{overflow:visible}@media (max-width:991.98px){.m3-nav,.navbar-nav.m3-nav{overflow:visible!important}}

/* v9 fixes: breadcrumbs, category tree, select wrappers */
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding-inline-end: .5rem;
  color: var(--m3-on-surface-variant);
  opacity: .9;
}

.m3-category-tree {
  border: 1px solid var(--m3-outline-variant);
  border-radius: 1.25rem;
  background: var(--m3-surface-container-low);
  box-shadow: var(--m3-elevation-1);
  overflow: hidden;
}
.m3-category-tree__title {
  padding: 1rem 1.25rem .75rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--m3-on-surface);
  border-bottom: 1px solid var(--m3-outline-variant);
}
.m3-category-tree__list {
  padding: .375rem 0;
}
.m3-category-tree__group + .m3-category-tree__group {
  border-top: 1px solid color-mix(in srgb, var(--m3-outline-variant) 70%, transparent);
}
.m3-category-tree__link,
.m3-category-tree__child {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .625rem 1rem;
  color: var(--m3-on-surface);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.m3-category-tree__link:hover,
.m3-category-tree__child:hover {
  background: color-mix(in srgb, var(--m3-primary) 8%, transparent);
  color: var(--m3-on-surface);
}
.m3-category-tree__link.is-active {
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-weight: 600;
}
.m3-category-tree__children {
  padding: .25rem 0 .5rem;
  border-top: 1px solid color-mix(in srgb, var(--m3-outline-variant) 55%, transparent);
  background: color-mix(in srgb, var(--m3-surface-container) 92%, white 8%);
}
.m3-category-tree__child {
  padding-inline-start: 1.5rem;
  font-size: .95rem;
}
.m3-category-tree__child.is-active {
  color: var(--m3-primary);
  font-weight: 600;
}
.m3-category-tree__child-sep {
  color: var(--m3-on-surface-variant);
}

.m3-select {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.m3-select:focus {
  border: 0;
  box-shadow: none;
}
.m3-select__button {
  min-height: 48px;
  padding: .75rem 1rem;
  border-radius: 1rem;
}
#input-sort + .m3-select,
#input-limit + .m3-select,
.m3-select {
  width: 100%;
}
.form-select,
select.form-select,
select.form-select-sm,
select:not(.m3-select__native) {
  min-height: 48px;
  padding: .625rem 2.5rem .625rem 1rem;
  border-radius: 1rem;
  background-position: right 1rem center;
}
.d-flex.align-items-center.gap-2 > .m3-select,
.d-flex.align-items-center.gap-2 > select,
.input-group > .m3-select,
.input-group > select {
  flex: 1 1 auto;
}

/* v11 fixes: product details layout */
.oc-specbox {
  padding: 1rem 1.25rem;
  border: 1px solid var(--m3-outline-variant);
  border-radius: 1.5rem;
  background: var(--m3-surface-container-low);
  box-shadow: var(--m3-elevation-1);
}
.oc-speccontent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}
.oc-speclist {
  display: grid;
  gap: .625rem;
}
.oc-specrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  min-height: 1.5rem;
  color: var(--m3-on-surface);
}
.oc-speclabel,
.oc-specval {
  white-space: nowrap;
}
.oc-specdots {
  min-width: 1.5rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--m3-outline) 70%, transparent);
  transform: translateY(.125rem);
}
.oc-specqr {
  width: 96px;
  min-width: 96px;
}
.oc-qrbox canvas,
.oc-qrbox img {
  max-width: 96px;
  height: auto;
  display: block;
}
.oc-qty {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 40px;
  border: 1px solid var(--m3-outline);
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--m3-surface);
  box-shadow: var(--m3-elevation-1);
}
.oc-qty__input {
  width: 100%;
  min-height: 56px;
  border: 0;
  outline: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  background: transparent;
  color: var(--m3-on-surface);
}
.oc-qty__input::-webkit-outer-spin-button,
.oc-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.oc-qty__input[type="number"] {
  -moz-appearance: textfield;
}
.oc-qty__btns {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-inline-start: 1px solid var(--m3-outline-variant);
}
.oc-qty__btn {
  border: 0;
  background: color-mix(in srgb, var(--m3-surface-container) 86%, white 14%);
  color: var(--m3-on-surface);
  font-size: 1.25rem;
  line-height: 1;
}
.oc-qty__btn + .oc-qty__btn {
  border-top: 1px solid var(--m3-outline-variant);
}
.oc-buybtn,
#button-cart.oc-buybtn {
  min-width: 132px;
  min-height: 56px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 1.25rem;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  box-shadow: var(--m3-elevation-1);
  font-weight: 600;
}
.oc-buybtn:hover,
#button-cart.oc-buybtn:hover {
  background: color-mix(in srgb, var(--m3-primary) 92%, black 8%);
  color: var(--m3-on-primary);
}
#product > .d-flex.gap-2.mt-3 {
  flex-wrap: wrap;
}
#product > .d-flex.gap-2.mt-3 > .btn {
  min-height: 48px;
  padding: .75rem 1.125rem;
  border-radius: 999px;
}
#productTabs {
  display: flex;
  gap: .5rem;
  padding: 0;
  margin: 0 0 1rem;
  border: 0;
}
#productTabs .nav-item {
  margin: 0;
}
#productTabs .nav-link {
  min-height: 44px;
  padding: .625rem 1rem;
  border-radius: .875rem;
  border: 1px solid var(--m3-outline-variant);
  background: var(--m3-surface-container-low);
  color: var(--m3-on-surface);
  box-shadow: none;
}
#productTabs .nav-link:hover {
  background: color-mix(in srgb, var(--m3-primary) 8%, var(--m3-surface-container-low));
}
#productTabs .nav-link.active {
  border-color: var(--m3-secondary-container);
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
}
#productTabsContent {
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: 0 1.5rem 1.5rem 1.5rem !important;
  background: var(--m3-surface-container-low);
  box-shadow: var(--m3-elevation-1);
  padding: 1.25rem !important;
}
@media (max-width: 991.98px) {
  .oc-speccontent {
    grid-template-columns: 1fr;
  }
  .oc-specqr {
    width: auto;
    min-width: 0;
  }
  .oc-qty {
    grid-template-columns: minmax(140px, 1fr) 40px;
  }
}


/* v14: product data box */
.oc-specbox {
  padding: 1.125rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--m3-outline-variant) 85%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--m3-surface-container-low) 94%, white 6%);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.oc-speccontent {
  display: grid;
  grid-template-columns: minmax(0,1fr) 88px;
  gap: 1rem;
  align-items: center;
}
.oc-speclist {
  display: grid;
  gap: .75rem;
}
.oc-specrow {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr) max-content;
  align-items: center;
  gap: .75rem;
}
.oc-speclabel {
  color: var(--m3-on-surface-variant);
  font-weight: 500;
}
.oc-specdots {
  border-bottom: 1px dotted color-mix(in srgb, var(--m3-outline) 75%, transparent);
  min-width: 2rem;
  transform: translateY(.1rem);
}
.oc-specval {
  color: var(--m3-on-surface);
  font-weight: 500;
}
.oc-specqr {
  width: 88px;
  min-width: 88px;
  align-self: start;
}
.oc-specqr .oc-qrbox,
.oc-specqr canvas,
.oc-specqr img {
  width: 88px !important;
  max-width: 88px !important;
  height: 88px !important;
  display: block;
  border-radius: .75rem;
  background: #fff;
}
#content .mb-3.fs-4,
#content .mb-3.fs-4 strong {
  color: var(--m3-on-surface);
}
#content .mb-3.fs-4 {
  margin-top: .5rem;
  margin-bottom: 1rem !important;
}
@media (max-width: 767.98px) {
  .oc-speccontent {
    grid-template-columns: 1fr;
  }
  .oc-specqr {
    width: 88px;
    min-width: 88px;
  }
}

.nav-tabs,
.nav-tabs li,
.m3-tabs,
.m3-tabs li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.nav-tabs::before,
.nav-tabs::after {
    display: none !important;
}

.nav-tabs li::marker,
.m3-tabs li::marker {
    content: "" !important;
}

.product-tabs ul,
.product-tabs li {
    list-style: none !important;
}


/* v15 product info panel hard override */

.product-info,
.product-product .product-info,
#product-product .product-info,
.product-product #content .product-info,
#content .product-info,
.m3-product-info,
.product-page__meta,
.product-meta {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 20px 24px !important;
  border: 1px solid rgba(103, 80, 164, .18) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  min-height: 0 !important;
}

.product-info > ul,
.product-product .product-info > ul,
#content .product-info > ul,
.m3-product-info__list,
.product-meta__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

.product-info > ul > li,
.product-product .product-info > ul > li,
#content .product-info > ul > li,
.m3-product-info__item,
.product-meta__item {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: 170px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 28px !important;
}

.product-info > ul > li::before,
.product-info > ul > li::after,
.product-product .product-info > ul > li::before,
.product-product .product-info > ul > li::after,
#content .product-info > ul > li::before,
#content .product-info > ul > li::after {
  content: none !important;
  display: none !important;
}

.product-info > ul > li > strong,
.product-info > ul > li > b,
.product-info > ul > li > span:first-child,
.product-product .product-info > ul > li > strong,
.product-product .product-info > ul > li > b,
.product-product .product-info > ul > li > span:first-child,
#content .product-info > ul > li > strong,
#content .product-info > ul > li > b,
#content .product-info > ul > li > span:first-child {
  font-weight: 500 !important;
  color: #49454f !important;
  white-space: nowrap !important;
}

.product-info > ul > li > strong + *,
.product-info > ul > li > b + *,
.product-info > ul > li > span:first-child + *,
.product-product .product-info > ul > li > strong + *,
.product-product .product-info > ul > li > b + *,
.product-product .product-info > ul > li > span:first-child + *,
#content .product-info > ul > li > strong + *,
#content .product-info > ul > li > b + *,
#content .product-info > ul > li > span:first-child + * {
  min-width: 0 !important;
}

.product-info > ul > li::after,
.product-product .product-info > ul > li::after,
#content .product-info > ul > li::after {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  align-self: center !important;
  background-image: linear-gradient(to right, rgba(73,69,79,.28) 33%, rgba(255,255,255,0) 0%) !important;
  background-position: bottom !important;
  background-size: 6px 1px !important;
  background-repeat: repeat-x !important;
  order: 2 !important;
}

.product-info > ul > li > :last-child,
.product-product .product-info > ul > li > :last-child,
#content .product-info > ul > li > :last-child {
  order: 3 !important;
  white-space: nowrap !important;
  color: #49454f !important;
  justify-self: end !important;
}

.product-info .qr-code,
.product-info .product-qr,
.product-product .product-info .qr-code,
.product-product .product-info .product-qr,
#content .product-info .qr-code,
#content .product-info .product-qr,
.product-info img[src*="qr"],
.product-product .product-info img[src*="qr"],
#content .product-info img[src*="qr"] {
  grid-column: 2 !important;
  grid-row: 1 / span 10 !important;
  width: 92px !important;
  height: 92px !important;
  object-fit: contain !important;
  align-self: start !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-radius: 12px !important;
}

.product-info .price,
.product-product .product-info .price,
#content .product-info .price {
  grid-column: 1 / -1 !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #1d1b20 !important;
  border: 0 !important;
}

@media (max-width: 767.98px) {
  .product-info,
  .product-product .product-info,
  #content .product-info,
  .m3-product-info,
  .product-page__meta,
  .product-meta {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  .product-info .qr-code,
  .product-info .product-qr,
  .product-product .product-info .qr-code,
  .product-product .product-info .product-qr,
  #content .product-info .qr-code,
  #content .product-info .product-qr,
  .product-info img[src*="qr"],
  .product-product .product-info img[src*="qr"],
  #content .product-info img[src*="qr"] {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }

  .product-info > ul > li,
  .product-product .product-info > ul > li,
  #content .product-info > ul > li {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .product-info > ul > li::after,
  .product-product .product-info > ul > li::after,
  #content .product-info > ul > li::after {
    display: none !important;
  }

  .product-info > ul > li > :last-child,
  .product-product .product-info > ul > li > :last-child,
  #content .product-info > ul > li > :last-child {
    justify-self: start !important;
  }

  .product-info .price,
  .product-product .product-info .price,
  #content .product-info .price {
    font-size: 28px !important;
  }
}


/* v16 – product info spacing fix */

.product-info,
.product-product .product-info,
#content .product-info{
  padding:16px 20px !important;
  margin:8px 0 18px 0 !important;
  border-radius:18px !important;
}

/* tighten rows */
.product-info ul,
.product-product .product-info ul{
  margin:0 !important;
  padding:0 !important;
}

.product-info ul li,
.product-product .product-info ul li{
  padding:4px 0 !important;
  margin:0 !important;
}

/* align dotted separator */
.product-info ul li{
  display:grid !important;
  grid-template-columns:150px 1fr auto !important;
  gap:10px !important;
  align-items:center !important;
}

/* reduce QR spacing */
.product-info img[src*="qr"]{
  margin-left:10px !important;
  width:88px !important;
  height:88px !important;
}

/* price spacing */
.product-info .price{
  margin-top:10px !important;
  font-size:30px !important;
}

/* mobile */
@media (max-width:768px){
  .product-info{
    padding:14px !important;
  }
  .product-info ul li{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }
}


/* v17 – correct padding for product info block */

.product-info,
.product-product .product-info,
#content .product-info{
  padding:24px 28px !important;
  margin:12px 0 22px 0 !important;
  border-radius:20px !important;
}

/* internal spacing */
.product-info ul,
.product-product .product-info ul{
  margin:0 !important;
  padding:0 !important;
}

.product-info ul li,
.product-product .product-info ul li{
  padding:6px 0 !important;
  margin:0 !important;
}

/* align columns */
.product-info ul li{
  display:grid !important;
  grid-template-columns:160px 1fr auto !important;
  gap:12px !important;
  align-items:center !important;
}

/* QR code spacing */
.product-info img[src*="qr"]{
  margin-left:14px !important;
  width:92px !important;
  height:92px !important;
}

/* price */
.product-info .price{
  margin-top:14px !important;
  font-size:32px !important;
}

/* mobile */
@media (max-width:768px){
  .product-info{
    padding:18px !important;
  }
  .product-info ul li{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
}

.m3-product-reviews .m3-review-card{background:var(--md-sys-color-surface-container-lowest,#fff);border:1px solid var(--md-sys-color-outline-variant,#cac4d0);border-radius:24px;overflow:hidden;margin-bottom:16px}.m3-product-reviews .m3-review-card__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--md-sys-color-outline-variant,#cac4d0)}.m3-product-reviews .m3-review-card__author{color:var(--md-sys-color-on-surface,#1d1b20);font-size:1rem;line-height:1.5}.m3-product-reviews .m3-review-card__date{color:var(--md-sys-color-on-surface-variant,#49454f);font-size:.95rem;line-height:1.5;white-space:nowrap}.m3-product-reviews .m3-review-card__body{padding:20px}.m3-product-reviews .m3-review-card__text{color:var(--md-sys-color-on-surface,#1d1b20);line-height:1.6;margin-bottom:12px}.m3-product-reviews .m3-review-card__rating{display:inline-flex;align-items:center;gap:4px;color:#f4b400;font-size:1.125rem;line-height:1}.m3-product-reviews .m3-review-card__rating .bi{color:inherit}.m3-product-reviews .m3-review-pagination{align-items:center;margin-top:16px}

/* Fix product thumbnail columns so they match image width */
.row.row-cols-4.g-2.mt-2 > .col{
    flex:0 0 auto;
    width:74px;
    max-width:74px;
    padding-left:0;
    padding-right:0;
}

.row.row-cols-4.g-2.mt-2{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* Hide product QR code on smartphones */
@media (max-width: 768px){
  .oc-specqr{
    display:none !important;
  }
}


/* Checkout vertical spacing improvements */

.checkout-section {
  margin-bottom: 24px;
}

.checkout-section__header {
  margin-bottom: 12px;
}

.checkout-section__body .form-group,
.checkout-section__body .mb-3 {
  margin-bottom: 18px;
}

.checkout-section__body .buttons {
  margin-top: 20px;
}

.checkout-section__body .btn {
  margin-top: 8px;
}

.checkout-section__body .forgotten {
  display: block;
  margin-top: 8px;
  margin-bottom: 12px;
}

#collapse-checkout-confirm .table {
  margin-bottom: 20px;
}

#collapse-checkout-confirm .buttons {
  margin-top: 20px;
}


/* Fix forgotten password link spacing and alignment */

a[href*="account/forgotten"]{
  display:block;
  margin-top:10px;
  margin-bottom:12px;
  font-size:0.9rem;
}

#collapse-checkout-option a[href*="account/forgotten"]{
  margin-top:12px;
}



/* SOURCE: catalog/view/storefront/material/tokens.css */
:root {
  --sf-color-primary: #6750A4;
  --sf-color-surface: #FFFBFE;
  --sf-color-text: #1D1B20;
  --sf-color-outline: #DADCE0;
}


/* SOURCE: catalog/view/storefront/material/theme.css */
body{

  font-family:var(--md-font);
  color:var(--md-on-surface);
  background:var(--md-surface);

  margin:0;
  padding:0;

}

a{

  color:var(--md-primary);
  text-decoration:none;

}

a:hover{

  text-decoration:underline;

}

.container{

  max-width:1280px;
  margin:0 auto;
  padding:var(--md-space-4);

}


/* SOURCE: catalog/view/storefront/material/layout.css */
/* ================================
   M3 Layout System
================================ */

:root {
  --m3-container-max: 1280px;
  --m3-space-1: 4px;
  --m3-space-2: 8px;
  --m3-space-3: 12px;
  --m3-space-4: 16px;
  --m3-space-5: 24px;
  --m3-space-6: 32px;
  --m3-space-7: 48px;
}

/* Container */

.m3-container {
  width: 100%;
  max-width: var(--m3-container-max);
  margin: 0 auto;
  padding-left: var(--m3-space-4);
  padding-right: var(--m3-space-4);
}

/* Page spacing */

.m3-section {
  margin-top: var(--m3-space-6);
  margin-bottom: var(--m3-space-6);
}

/* Grid */

.m3-grid {
  display: grid;
  gap: var(--m3-space-5);
}

.m3-grid-2 {
  grid-template-columns: repeat(2,1fr);
}

.m3-grid-3 {
  grid-template-columns: repeat(3,1fr);
}

.m3-grid-4 {
  grid-template-columns: repeat(4,1fr);
}

.m3-grid-auto {
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
}

/* Flex helpers */

.m3-flex {
  display:flex;
}

.m3-flex-between {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.m3-flex-center {
  display:flex;
  align-items:center;
  justify-content:center;
}

.m3-flex-col {
  display:flex;
  flex-direction:column;
}

/* Responsive */

@media (max-width:1024px){

  .m3-grid-4{
    grid-template-columns:repeat(3,1fr);
  }

}

@media (max-width:768px){

  .m3-grid-4,
  .m3-grid-3{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:480px){

  .m3-grid-4,
  .m3-grid-3,
  .m3-grid-2{
    grid-template-columns:1fr;
  }

}

/* SOURCE: catalog/view/storefront/material/components.css */
/* ================================
   M3 Components
================================ */

/* Buttons */

.m3-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 16px;

  border-radius:20px;
  border:none;

  cursor:pointer;

  background:var(--m3-primary,#6750A4);
  color:#fff;

  font-size:14px;
  font-weight:500;

  transition:all .2s ease;
}

.m3-button:hover{
  opacity:.9;
}

.m3-button-outline{
  background:transparent;
  border:1px solid var(--m3-primary,#6750A4);
  color:var(--m3-primary,#6750A4);
}

/* Product Grid */

.m3-product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
}

/* Product Card */

.m3-product-card{

  display:flex;
  flex-direction:column;

  background:#fff;
  border-radius:16px;

  padding:16px;

  box-shadow:0 1px 3px rgba(0,0,0,0.1);

  transition:transform .15s ease, box-shadow .15s ease;
}

.m3-product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* Image */

.m3-product-card__image{
  display:block;
  margin-bottom:12px;
}

.m3-product-card__image img{
  width:100%;
  height:auto;
  border-radius:12px;
}

/* Title */

.m3-product-card__title{
  font-size:15px;
  font-weight:500;
  margin-bottom:8px;
}

.m3-product-card__title a{
  text-decoration:none;
  color:#1c1b1f;
}

/* Price */

.m3-product-card__price{
  font-size:16px;
  font-weight:600;
  margin-bottom:12px;
}

.price-old{
  text-decoration:line-through;
  opacity:.6;
  margin-left:8px;
}

/* Cart button */

.m3-product-card .m3-button{
  margin-top:auto;
}

/* Header */

.m3-header{
  padding:16px 0;
  border-bottom:1px solid #eee;
}

/* Footer */

.m3-footer{
  margin-top:48px;
  padding:32px 0;
  border-top:1px solid #eee;
  font-size:14px;
}


/* SOURCE: generated m3 stabilization overrides */
:root{--m3-container-max:1320px;--m3-header-gap:24px;--m3-card-radius:24px;--m3-card-padding:20px}
html{font-size:16px}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--md-sys-color-background,#fdf8f5);color:var(--md-sys-color-on-background,#1f1b16)}
.m3-icon,.m3-search__icon svg,.m3-header__action svg,.m3-button svg{width:24px;height:24px;flex:0 0 24px;display:inline-block}.bi{font-size:1rem;line-height:1}
.page-shell{min-height:100vh;display:flex;flex-direction:column}main{flex:1 0 auto}.m3-main{padding-top:24px;padding-bottom:32px}
.m3-container{width:100%;max-width:var(--m3-container-max);margin-inline:auto;padding-inline:16px}@media (min-width:992px){.m3-container{padding-inline:24px}}
.m3-shell__topbar{background:var(--md-sys-color-surface-container-low,#f5efe8);border-bottom:1px solid var(--md-sys-color-outline-variant,#d8c2b3)}
.m3-shell__topbar-inner{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}.m3-shell__topbar-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.m3-shell__topbar .nav{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}.m3-shell__topbar .nav-link{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant,#5b534c);font-size:.95rem;text-decoration:none}.m3-shell__topbar .dropdown-menu{min-width:220px}
.m3-header{display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;gap:var(--m3-header-gap);padding:24px 0}.m3-header__logo img{display:block;max-height:88px;width:auto}.m3-header__search{min-width:0}.m3-header__actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.m3-header__action{min-height:44px;border-radius:999px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--md-sys-color-on-surface,#211a14);background:var(--md-sys-color-surface-container-low,#f7f1ea);border:1px solid var(--md-sys-color-outline-variant,#dac5b7)}.m3-header__action:hover{background:var(--md-sys-color-surface-container,#f0e7de)}.m3-header__action-label{white-space:nowrap;font-size:.95rem}
.m3-search{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:56px;border-radius:28px;background:var(--md-sys-color-surface-container-low,#f7f1ea);border:1px solid var(--md-sys-color-outline-variant,#dac5b7);overflow:hidden}.m3-search__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant,#675f57);padding-left:18px}.m3-search__input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:0 12px;height:54px}.m3-search__submit{height:40px;margin-right:8px;border:0;border-radius:999px;padding:0 18px;background:var(--md-sys-color-primary,#7a4b2a);color:var(--md-sys-color-on-primary,#fff);cursor:pointer}.m3-search__submit:hover{filter:brightness(.96)}
.m3-nav-shell{border-top:1px solid var(--md-sys-color-outline-variant,#dac5b7);border-bottom:1px solid var(--md-sys-color-outline-variant,#dac5b7);background:var(--md-sys-color-surface,#fffdfa)}.m3-navbar{position:relative}.m3-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:10px 0}.m3-nav__item{position:relative}.m3-nav__link{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:999px;color:var(--md-sys-color-on-surface,#211a14);text-decoration:none}.m3-nav__link:hover,.m3-nav__item--parent.is-open>.m3-nav__link{background:var(--md-sys-color-secondary-container,#efe2d7)}.m3-nav__dropdown,.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;z-index:40;display:none;padding:8px;margin:0;list-style:none;border-radius:20px;background:var(--md-sys-color-surface-container-low,#fff);border:1px solid var(--md-sys-color-outline-variant,#dac5b7);box-shadow:0 16px 40px rgba(30,25,20,.12)}.dropdown-menu-end{left:auto;right:0}.m3-nav__dropdown-link,.dropdown-item{display:flex;align-items:center;min-height:40px;border-radius:14px;padding:0 12px;color:inherit;text-decoration:none}.m3-nav__dropdown-link:hover,.dropdown-item:hover{background:var(--md-sys-color-surface-container,#f3e9df)}.dropdown-divider{border-top:1px solid var(--md-sys-color-outline-variant,#dac5b7);margin:6px 0}.dropdown-menu.show,.m3-nav__item--parent.is-open>.m3-nav__dropdown{display:block}
.breadcrumb,.m3-breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 24px;padding:0;color:var(--md-sys-color-on-surface-variant,#6e6258)}.breadcrumb-item + .breadcrumb-item::before{content:"›";margin-right:8px;color:var(--md-sys-color-outline,#8d8074)}.breadcrumb-item.active{color:var(--md-sys-color-on-surface,#211a14)}
.m3-page{display:grid;gap:24px}.m3-surface,.oc-cart-card,.oc-cart-summary,.m3-cart,.m3-summary{background:var(--md-sys-color-surface-container-low,#fff);border:1px solid var(--md-sys-color-outline-variant,#dac5b7);border-radius:24px;box-shadow:0 1px 2px rgba(0,0,0,.04)}.m3-surface{padding:24px}.m3-stack{display:grid;gap:16px}.m3-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.m3-category-chip,.m3-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant,#dac5b7);color:inherit;text-decoration:none;background:var(--md-sys-color-surface,#fffdfa)}.m3-category-chip:hover{background:var(--md-sys-color-secondary-container,#efe2d7)}.m3-catalog-toolbar{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}.m3-catalog-toolbar__group{display:grid;gap:8px}
.form-select,.form-control,.m3-input,select,input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="password"],input[type="number"],textarea{width:100%;min-height:52px;border-radius:16px;border:1px solid var(--md-sys-color-outline,#9c8d82);background:var(--md-sys-color-surface,#fffdfa);color:inherit;padding:0 16px;box-shadow:none}textarea{min-height:120px;padding-top:14px;padding-bottom:14px}.form-check{display:flex;align-items:flex-start;gap:10px}.form-check-input{margin-top:3px}
.m3-product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.m3-product-card{display:grid;grid-template-rows:auto 1fr auto;gap:16px;height:100%;background:var(--md-sys-color-surface-container-low,#fff);border:1px solid var(--md-sys-color-outline-variant,#dac5b7);border-radius:28px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.05)}.m3-product-card__image{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:var(--md-sys-color-surface-container,#f3e9df)}.m3-product-card__image img{width:100%;height:100%;object-fit:contain}.m3-product-card__title,.m3-product-card__title a{color:var(--md-sys-color-on-surface,#211a14);text-decoration:none;font-size:1rem;line-height:1.4;font-weight:600}.m3-product-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-size:1.05rem;font-weight:700}.price-old,.m3-product-card__price .price-old{font-size:.95rem;font-weight:500;color:var(--md-sys-color-on-surface-variant,#6e6258);text-decoration:line-through}.price-new{color:var(--md-sys-color-primary,#7a4b2a)}.m3-product-card .m3-actions>*{flex:1 1 auto}
.btn,.m3-button,.oc-btn-filled,.oc-btn-tonal,.m3-button-tonal,.m3-button-text{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;font-weight:600}.btn-primary,.m3-button,.oc-btn-filled{background:var(--md-sys-color-primary,#7a4b2a);color:var(--md-sys-color-on-primary,#fff);border-color:var(--md-sys-color-primary,#7a4b2a)}.btn-outline-secondary,.oc-btn-tonal,.m3-button-tonal{background:var(--md-sys-color-secondary-container,#efe2d7);color:var(--md-sys-color-on-secondary-container,#2e2118);border-color:var(--md-sys-color-outline-variant,#dac5b7)}.btn:hover,.m3-button:hover,.oc-btn-filled:hover,.oc-btn-tonal:hover{filter:brightness(.97)}.btn-close{width:32px;height:32px;border-radius:50%;border:0;background:transparent;cursor:pointer;position:relative;flex:0 0 32px}.btn-close::before,.btn-close::after{content:"";position:absolute;top:15px;left:8px;width:16px;height:2px;background:currentColor}.btn-close::before{transform:rotate(45deg)}.btn-close::after{transform:rotate(-45deg)}
.alert,.m3-alert{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:18px;margin-bottom:16px;border:1px solid transparent}.alert-info{background:#e8f1ff;border-color:#c8dafb;color:#173153}.alert-success{background:#e7f6e8;border-color:#b8e0be;color:#1d4e28}.alert-danger{background:#fdeaea;border-color:#f0bbbb;color:#6d1d1d}
#cart{position:relative}.m3-cart-dropdown>.m3-button{white-space:nowrap}.m3-cart{position:absolute;top:calc(100% + 12px);right:0;min-width:auto;max-width:min(94vw,420px);z-index:45;display:none;}.dropdown-menu.m3-cart.show{display:grid}.m3-cart__item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center}.m3-cart__thumb{width:56px}.m3-cart__thumb img{width:56px;height:56px;object-fit:cover;border-radius:14px}.text-muted{color:var(--md-sys-color-on-surface-variant,#6e6258)}.text-end{text-align:end}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.d-flex{display:flex}.list-unstyled{list-style:none;padding-left:0}.mb-0{margin-bottom:0}.mb-4{margin-bottom:24px}.mt-4{margin-top:24px}.py-4{padding-top:24px;padding-bottom:24px}.px-0{padding-left:0;padding-right:0}.gap-3{gap:1rem}.gy-4{row-gap:1.5rem}.rounded-4{border-radius:24px}.img-fluid{max-width:100%;height:auto}.d-none{display:none}@media (min-width:992px){.d-lg-inline{display:inline}.m3-header__action-label--desktop{display:inline}}@media (max-width:991.98px){.m3-header{grid-template-columns:1fr}.m3-header__actions{justify-content:flex-start}.m3-shell__topbar-inner{align-items:flex-start;flex-direction:column}.m3-cart{right:auto;left:0}}@media (max-width:767.98px){.m3-nav{flex-direction:column;align-items:stretch}.m3-nav__item,.m3-nav__link{width:100%}.m3-product-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.m3-cart{min-width:0;width:min(94vw,420px)}}@media (max-width:575.98px){.m3-product-grid{grid-template-columns:1fr}.m3-shell__topbar .nav{flex-wrap:wrap;gap:10px}}
.table-responsive{width:100%;overflow:auto}.table,.oc-cart-table{width:100%;border-collapse:collapse}.table th,.table td,.oc-cart-table th,.oc-cart-table td{padding:14px 12px;border-bottom:1px solid var(--md-sys-color-outline-variant,#dac5b7);vertical-align:top}.oc-cart-card{padding:8px 18px}.oc-cart-thumb{width:72px;height:72px;object-fit:cover;border-radius:18px}.oc-cart-product-name{font-weight:600}.oc-cart-product-meta{display:grid;gap:4px;margin-top:8px}.oc-cart-qty{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.oc-cart-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--md-sys-color-outline-variant,#dac5b7);background:var(--md-sys-color-surface,#fff);color:inherit}.oc-cart-icon-btn--danger{color:#b3261e}.oc-cart-qty-input{width:88px;min-height:40px;text-align:center}.oc-cart-summary{padding:24px}.oc-cart-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}.oc-cart-total-row{padding:10px 0;border-bottom:1px solid var(--md-sys-color-outline-variant,#dac5b7)}
.m3-product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:24px;align-items:start}@media (max-width:980px){.m3-product{grid-template-columns:1fr}}.m3-gallery{display:grid;gap:14px}.m3-gallery__main{display:flex;align-items:center;justify-content:center;border-radius:28px;overflow:hidden;min-height:420px;background:var(--md-sys-color-surface-container,#f3e9df)}.m3-gallery__main img{max-width:100%;max-height:560px;object-fit:contain}.m3-gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:10px}.m3-gallery__thumb{display:block;border-radius:18px;overflow:hidden;background:var(--md-sys-color-surface,#fff);border:1px solid var(--md-sys-color-outline-variant,#dac5b7);padding:6px}.m3-gallery__thumb img{width:100%;aspect-ratio:1/1;object-fit:cover}.m3-product-panel{display:grid;gap:18px}.m3-product-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;font-size:1.65rem;font-weight:800}.m3-product-price__old{color:var(--md-sys-color-on-surface-variant,#6e6258);text-decoration:line-through;font-size:1rem}.m3-product-form{display:grid;gap:18px}.nav-tabs{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0;list-style:none;margin:0 0 18px}.nav-tabs .nav-link{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant,#dac5b7);background:var(--md-sys-color-surface,#fff);cursor:pointer}.nav-tabs .nav-link.active{background:var(--md-sys-color-secondary-container,#efe2d7);border-color:transparent}.tab-content{display:block}.tab-pane{display:none}.tab-pane.active.show{display:block}.m3-tab-panel{background:var(--md-sys-color-surface-container-low,#fff);border:1px solid var(--md-sys-color-outline-variant,#dac5b7);border-radius:24px;padding:24px}
.m3-footer{margin-top:40px;border-top:1px solid var(--md-sys-color-outline-variant,#dac5b7);background:var(--md-sys-color-surface-container-low,#f5efe8)}.m3-footer .row{align-items:start}.m3-footer__title{margin:0 0 12px;font-size:1rem}.m3-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.m3-footer__bottom{padding-top:24px;margin-top:24px;border-top:1px solid var(--md-sys-color-outline-variant,#dac5b7)}


/* Account layout improvement */

#content + .col-lg-3,
#column-right,
.account-menu,
.m3-account-menu{
    margin-left:auto;
}

/* move account menu to right column when stacked */
@media (min-width: 992px){
    .account-page .row{
        display:flex;
        flex-direction:row-reverse;
    }
}

/* increase spacing between menu items */
.account-menu a,
.m3-account-menu a,
.list-group-item{
    padding:14px 18px;
    margin-bottom:8px;
    border-radius:12px;
}

/* more breathing space inside menu block */
.account-menu,
.m3-account-menu{
    padding:8px 0;
}

/* Cart alert improvement */

.alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-radius:18px;
  font-size: x-large;
  /* line-height:1.4; */
}

.alert-danger{
  font-weight:500;
}

.alert .btn-close,
.alert button{
  margin-left:16px;
}

/* Product gallery size + background restore */

.m3-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.m3-gallery__main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 420px;
  padding: 2rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 28px;
  background: #f5f1eb;
  cursor: zoom-in;
}

.m3-gallery__main img {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 320px;
  object-fit: contain;
  margin: 0 auto;
}

.m3-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.m3-gallery__thumb {
  width: 96px;
  height: 96px;
  padding: .5rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  background: #f5f1eb;
  cursor: pointer;
}

.m3-gallery__thumb.is-active {
  box-shadow: 0 0 0 2px rgba(0,0,0,.12) inset;
}

.m3-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .m3-gallery__main {
    min-height: 340px;
    padding: 1.5rem;
  }

  .m3-gallery__main img {
    max-width: 260px;
    max-height: 260px;
  }
}

/* CSS patch for popup gallery navigation */

.m3-lightbox {
  position: relative;
}

.m3-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 28px;
  line-height: 1;
  padding: 0;
}

.m3-lightbox-nav--prev {
  left: 16px;
}

.m3-lightbox-nav--next {
  right: 16px;
}