/* ==========================================================================
   VIKA — Bootstrap-class compatibility layer
   The shop / product / compare views were written with Bootstrap utility and
   component classes. Bootstrap's own CSS clashes with the approved theme
   (.btn, .container, .modal, .nav ...), so only the pieces those views use are
   re-implemented here, in the theme's look. Direction-neutral (logical
   properties): the same file serves css/RTL and css/LTR.
   ========================================================================== */

/* spacing */
.m-0{margin:0!important}.p-0{padding:0!important}
.mt-0{margin-block-start:0!important}.mb-0{margin-block-end:0!important}.ms-0{margin-inline-start:0!important}.me-0{margin-inline-end:0!important}
.mx-0{margin-inline:0!important}.my-0{margin-block:0!important}
.pt-0{padding-block-start:0!important}.pb-0{padding-block-end:0!important}.ps-0{padding-inline-start:0!important}.pe-0{padding-inline-end:0!important}
.px-0{padding-inline:0!important}.py-0{padding-block:0!important}
.gap-0{gap:0!important}
.m-1{margin:.25rem!important}.p-1{padding:.25rem!important}
.mt-1{margin-block-start:.25rem!important}.mb-1{margin-block-end:.25rem!important}.ms-1{margin-inline-start:.25rem!important}.me-1{margin-inline-end:.25rem!important}
.mx-1{margin-inline:.25rem!important}.my-1{margin-block:.25rem!important}
.pt-1{padding-block-start:.25rem!important}.pb-1{padding-block-end:.25rem!important}.ps-1{padding-inline-start:.25rem!important}.pe-1{padding-inline-end:.25rem!important}
.px-1{padding-inline:.25rem!important}.py-1{padding-block:.25rem!important}
.gap-1{gap:.25rem!important}
.m-2{margin:.5rem!important}.p-2{padding:.5rem!important}
.mt-2{margin-block-start:.5rem!important}.mb-2{margin-block-end:.5rem!important}.ms-2{margin-inline-start:.5rem!important}.me-2{margin-inline-end:.5rem!important}
.mx-2{margin-inline:.5rem!important}.my-2{margin-block:.5rem!important}
.pt-2{padding-block-start:.5rem!important}.pb-2{padding-block-end:.5rem!important}.ps-2{padding-inline-start:.5rem!important}.pe-2{padding-inline-end:.5rem!important}
.px-2{padding-inline:.5rem!important}.py-2{padding-block:.5rem!important}
.gap-2{gap:.5rem!important}
.m-3{margin:1rem!important}.p-3{padding:1rem!important}
.mt-3{margin-block-start:1rem!important}.mb-3{margin-block-end:1rem!important}.ms-3{margin-inline-start:1rem!important}.me-3{margin-inline-end:1rem!important}
.mx-3{margin-inline:1rem!important}.my-3{margin-block:1rem!important}
.pt-3{padding-block-start:1rem!important}.pb-3{padding-block-end:1rem!important}.ps-3{padding-inline-start:1rem!important}.pe-3{padding-inline-end:1rem!important}
.px-3{padding-inline:1rem!important}.py-3{padding-block:1rem!important}
.gap-3{gap:1rem!important}
.m-4{margin:1.5rem!important}.p-4{padding:1.5rem!important}
.mt-4{margin-block-start:1.5rem!important}.mb-4{margin-block-end:1.5rem!important}.ms-4{margin-inline-start:1.5rem!important}.me-4{margin-inline-end:1.5rem!important}
.mx-4{margin-inline:1.5rem!important}.my-4{margin-block:1.5rem!important}
.pt-4{padding-block-start:1.5rem!important}.pb-4{padding-block-end:1.5rem!important}.ps-4{padding-inline-start:1.5rem!important}.pe-4{padding-inline-end:1.5rem!important}
.px-4{padding-inline:1.5rem!important}.py-4{padding-block:1.5rem!important}
.gap-4{gap:1.5rem!important}
.m-5{margin:3rem!important}.p-5{padding:3rem!important}
.mt-5{margin-block-start:3rem!important}.mb-5{margin-block-end:3rem!important}.ms-5{margin-inline-start:3rem!important}.me-5{margin-inline-end:3rem!important}
.mx-5{margin-inline:3rem!important}.my-5{margin-block:3rem!important}
.pt-5{padding-block-start:3rem!important}.pb-5{padding-block-end:3rem!important}.ps-5{padding-inline-start:3rem!important}.pe-5{padding-inline-end:3rem!important}
.px-5{padding-inline:3rem!important}.py-5{padding-block:3rem!important}
.gap-5{gap:3rem!important}
.mx-auto{margin-inline:auto!important}

/* display / flex / sizing */
.d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important}
.d-inline-block{display:inline-block!important}.d-inline-flex{display:inline-flex!important}.d-grid{display:grid!important}
.flex-wrap{flex-wrap:wrap!important}.flex-column{flex-direction:column!important}.flex-fill{flex:1 1 auto!important}
.justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}
.justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important}
.align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important}.align-items-end{align-items:flex-end!important}
.align-middle{vertical-align:middle!important}
.w-100{width:100%!important}.w-auto{width:auto!important}.h-100{height:100%!important}
.overflow-hidden{overflow:hidden!important}.position-relative{position:relative!important}
.stretched-link::after{content:"";position:absolute;inset:0;z-index:1}
.opacity-50{opacity:.5!important}.object-fit-cover{object-fit:cover!important}
.img-fluid,.img-thumbnail{max-width:100%;height:auto}.img-thumbnail{border:1px solid var(--glass-border);padding:var(--sp-1)}

/* text */
.text-center{text-align:center!important}.text-start{text-align:start!important}.text-end{text-align:end!important}.text-justify{text-align:justify!important}
.text-muted,.text-secondary{color:var(--fg-muted)!important}
.text-dark,.text-white{color:var(--fg)!important}
.text-primary,.text-info,.text-warning{color:var(--accent)!important}
.text-success{color:oklch(78% .13 150)!important}.text-danger{color:oklch(74% .15 25)!important}
.text-decoration-none{text-decoration:none!important}.text-decoration-line-through{text-decoration:line-through!important}
.fw-bold{font-weight:600!important}.fw-semibold{font-weight:500!important}
.small,small{font-size:.8rem}.fs-5{font-size:1.15rem!important}.h6{font-size:1rem}.display-5{font-size:2.6rem;line-height:1.2}
.form-text{font-size:.75rem;color:var(--fg-faint)}

/* surfaces */
.bg-light,.bg-white{background:var(--glass-bg)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bg-gradient-primary-light{background:linear-gradient(135deg,oklch(74% .09 85/.1),oklch(74% .09 85/.02))!important}
.border{border:1px solid var(--glass-border)!important}.border-0{border:0!important}
.border-bottom{border-block-end:1px solid var(--glass-border)!important}
.shadow-sm{box-shadow:0 12px 30px oklch(0% 0 0/.3)!important}

/* grid */
.row{--gx:0px;--gy:0px;display:flex;flex-wrap:wrap;margin-inline:calc(var(--gx) / -2);margin-block-start:calc(var(--gy) * -1)}
.row>*{flex-shrink:0;width:100%;max-width:100%;padding-inline:calc(var(--gx) / 2);margin-block-start:var(--gy)}
.g-3{--gx:1rem;--gy:1rem}.g-4{--gx:1.5rem;--gy:1.5rem}
.col{flex:1 0 0%;width:auto}.col-12{flex:0 0 auto;width:100%}
@media(min-width:576px){.col-sm-6{flex:0 0 auto;width:50%}}
@media(min-width:768px){.col-md-4{flex:0 0 auto;width:33.3333%}.col-md-6{flex:0 0 auto;width:50%}.col-md-8{flex:0 0 auto;width:66.6667%}}
@media(min-width:992px){.col-lg-4{flex:0 0 auto;width:33.3333%}.col-lg-8{flex:0 0 auto;width:66.6667%}}

/* badge */
.badge{display:inline-flex;align-items:center;padding:.3rem .7rem;font-size:.72rem;font-weight:500;line-height:1.2;border:1px solid transparent}
.badge.bg-secondary{background:var(--glass-bg-strong)!important;color:var(--fg-muted);border-color:var(--glass-border)}
.badge.bg-light,.badge.bg-white{background:var(--glass-bg)!important;color:var(--fg)}
.badge.bg-warning,.badge.bg-info{background:linear-gradient(120deg,var(--c-gold-dim),var(--c-gold-bright))!important;color:var(--c-ink-deep)!important;border-color:transparent}
.badge.bg-success{background:oklch(70% .12 150/.18)!important;color:oklch(85% .1 150);border-color:oklch(70% .12 150/.5)}

/* buttons: variants on top of the approved .btn */
.btn-sm{padding:.55rem 1.2rem;font-size:.82rem}
.btn-warning,.btn-primary,.btn-success{background:linear-gradient(120deg,var(--c-gold-dim),var(--c-gold-bright) 50%,var(--c-gold));color:var(--c-ink-deep); justify-content:space-evenly;}
.btn-warning:hover,.btn-primary:hover,.btn-success:hover{transform:translateY(-2px);box-shadow:0 0 40px oklch(74% .09 85/.3)}
.btn-secondary,.btn-outline-secondary,.btn-outline-primary,.btn-outline-info,.btn-outline-dark,.btn-outline-warning{background:transparent;color:var(--fg);border:1px solid var(--glass-border);cursor:pointer}
.btn-secondary:hover,.btn-outline-secondary:hover,.btn-outline-primary:hover,.btn-outline-info:hover,.btn-outline-dark:hover,.btn-outline-warning:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger,.btn-outline-danger{background:transparent;color:oklch(78% .13 25);border:1px solid oklch(65% .18 25/.5);cursor:pointer}
.btn-danger:hover,.btn-outline-danger:hover{background:oklch(65% .18 25/.12);border-color:oklch(65% .18 25/.9)}
.btn:disabled,.btn.disabled{opacity:.5;pointer-events:none}

/* forms */
.form-label{display:block;margin-block-end:var(--sp-2);font-size:.82rem;color:var(--fg-muted)}
.form-control,.form-select{display:block;width:100%;padding:.75rem 1rem;font-size:.9rem;color:var(--fg);background:oklch(18% .005 85/.6);border:1px solid var(--glass-border);border-radius:0;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.form-control-sm,.form-select-sm{padding:.55rem .8rem;font-size:.82rem}
.form-control::placeholder{color:var(--fg-faint)}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px oklch(74% .09 85/.15)}
.form-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23c9a24f' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:var(--select-pos)}
.form-select option{background:var(--c-ink);color:var(--fg)}

/* table */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.88rem;color:var(--fg-muted)}
.table th,.table td{padding:var(--sp-3) var(--sp-4);text-align:start;vertical-align:middle}
.table-bordered th,.table-bordered td{border:1px solid var(--glass-border)}
.table thead th,.table-light th{color:var(--fg);font-weight:500;background:var(--glass-bg)}
.table-hover tbody tr{transition:background var(--t-fast)}.table-hover tbody tr:hover{background:oklch(74% .09 85/.06)}

/* alert */
.alert{padding:var(--sp-4) var(--sp-5);border:1px solid var(--glass-border);font-size:.88rem;color:var(--fg-muted);background:var(--glass-bg)}
.alert-info{border-color:oklch(74% .09 85/.4);background:oklch(74% .09 85/.06)}
.alert-warning{border-color:oklch(75% .13 70/.5);background:oklch(75% .13 70/.08);color:oklch(86% .1 80)}
.alert-success{border-color:oklch(70% .12 150/.5);background:oklch(70% .12 150/.08);color:oklch(85% .1 150)}
.alert-danger{border-color:oklch(65% .18 25/.5);background:oklch(65% .18 25/.08);color:oklch(82% .1 25)}

/* progress / spinner */
.progress{height:6px;background:var(--glass-bg-strong);overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--c-gold-dim),var(--c-gold-bright));transition:width var(--t-med)}
.spinner-border{display:inline-block;width:2rem;height:2rem;border:2px solid var(--glass-border);border-top-color:var(--accent);border-radius:50%;animation:spinSlow .8s linear infinite}
.spinner-border-sm{width:1rem;height:1rem}

/* tabs / transitions (Bootstrap's tab plugin toggles .active / .show) */
.fade{transition:opacity .2s linear}.fade:not(.show){opacity:0}
.tab-content>.tab-pane{display:none}.tab-content>.tab-pane.active{display:block}
.nav-link{display:inline-flex;align-items:center;cursor:pointer;background:none;border:0}

/* dismissible alerts (Bootstrap's data-bs-dismiss still works) */
.alert-dismissible { position: relative; padding-inline-end: 3.4rem; }
.btn-close { position: absolute; inset-block-start: 50%; inset-inline-end: var(--sp-3); translate: 0 -50%; width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 1px solid var(--glass-border); color: var(--fg-muted); cursor: pointer; padding: 0; transition: border-color var(--t-fast), color var(--t-fast); }
.btn-close::before { content: "\00d7"; font-size: 1.1rem; line-height: 1; }
.btn-close:hover { border-color: var(--accent); color: var(--accent); }