:root{
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --text: #000000;
  --muted: #555555;
  --muted-2: #898989;
  --line: rgba(0, 0, 0, 0.14);
  --primary: #09347b;
  --primary-2: #015394;
  --danger: #ED1C24;
  --success: #16a34a;
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  --radius: 16px;
  --radius-sm: 12px;
  --subra-container-xxl: 1558px;
  --subra-container-xl: 1320px;
  --subra-container-lg: 1140px;
  --subra-container-md: 960px;
  --subra-container-sm: 720px;
  --container: var(--subra-container-xxl);
  --font-sans: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: Montserrat, sans-serif;

  /* Typography scale (aligned to PSD feel) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --lh-tight: 1.2;
  --lh-body: 1.45;
}

/* Bootstrap spacing extensions: levels 6 / 7 / 8 */
.m-6{  margin:        4rem !important; }
.mt-6{ margin-top:    4rem !important; }
.mb-6{ margin-bottom: 4rem !important; }
.ms-6{ margin-left:   4rem !important; }
.me-6{ margin-right:  4rem !important; }
.mx-6{ margin-left:   4rem !important; margin-right:  4rem !important; }
.my-6{ margin-top:    4rem !important; margin-bottom: 4rem !important; }

.m-7{  margin:        5rem !important; }
.mt-7{ margin-top:    5rem !important; }
.mb-7{ margin-bottom: 5rem !important; }
.ms-7{ margin-left:   5rem !important; }
.me-7{ margin-right:  5rem !important; }
.mx-7{ margin-left:   5rem !important; margin-right:  5rem !important; }
.my-7{ margin-top:    5rem !important; margin-bottom: 5rem !important; }

.m-8{  margin:        6rem !important; }
.mt-8{ margin-top:    6rem !important; }
.mb-8{ margin-bottom: 6rem !important; }
.ms-8{ margin-left:   6rem !important; }
.me-8{ margin-right:  6rem !important; }
.mx-8{ margin-left:   6rem !important; margin-right:  6rem !important; }
.my-8{ margin-top:    6rem !important; margin-bottom: 6rem !important; }

.p-6{  padding:        4rem !important; }
.pt-6{ padding-top:    4rem !important; }
.pb-6{ padding-bottom: 4rem !important; }
.ps-6{ padding-left:   4rem !important; }
.pe-6{ padding-right:  4rem !important; }
.px-6{ padding-left:   4rem !important; padding-right:  4rem !important; }
.py-6{ padding-top:    4rem !important; padding-bottom: 4rem !important; }

.p-7{  padding:        5rem !important; }
.pt-7{ padding-top:    5rem !important; }
.pb-7{ padding-bottom: 5rem !important; }
.ps-7{ padding-left:   5rem !important; }
.pe-7{ padding-right:  5rem !important; }
.px-7{ padding-left:   5rem !important; padding-right:  5rem !important; }
.py-7{ padding-top:    5rem !important; padding-bottom: 5rem !important; }

.p-8{  padding:        6rem !important; }
.pt-8{ padding-top:    6rem !important; }
.pb-8{ padding-bottom: 6rem !important; }
.ps-8{ padding-left:   6rem !important; }
.pe-8{ padding-right:  6rem !important; }
.px-8{ padding-left:   6rem !important; padding-right:  6rem !important; }
.py-8{ padding-top:    6rem !important; padding-bottom: 6rem !important; }

/* Bootstrap spacing extensions: responsive variants */
@media (min-width: 576px){
  .m-sm-6{  margin:        4rem !important; }
  .mt-sm-6{ margin-top:    4rem !important; }
  .mb-sm-6{ margin-bottom: 4rem !important; }
  .ms-sm-6{ margin-left:   4rem !important; }
  .me-sm-6{ margin-right:  4rem !important; }
  .mx-sm-6{ margin-left:   4rem !important; margin-right:  4rem !important; }
  .my-sm-6{ margin-top:    4rem !important; margin-bottom: 4rem !important; }
  .p-sm-6{  padding:        4rem !important; }
  .pt-sm-6{ padding-top:    4rem !important; }
  .pb-sm-6{ padding-bottom: 4rem !important; }
  .ps-sm-6{ padding-left:   4rem !important; }
  .pe-sm-6{ padding-right:  4rem !important; }
  .px-sm-6{ padding-left:   4rem !important; padding-right:  4rem !important; }
  .py-sm-6{ padding-top:    4rem !important; padding-bottom: 4rem !important; }

  .m-sm-7{  margin:        5rem !important; }
  .mt-sm-7{ margin-top:    5rem !important; }
  .mb-sm-7{ margin-bottom: 5rem !important; }
  .ms-sm-7{ margin-left:   5rem !important; }
  .me-sm-7{ margin-right:  5rem !important; }
  .mx-sm-7{ margin-left:   5rem !important; margin-right:  5rem !important; }
  .my-sm-7{ margin-top:    5rem !important; margin-bottom: 5rem !important; }
  .p-sm-7{  padding:        5rem !important; }
  .pt-sm-7{ padding-top:    5rem !important; }
  .pb-sm-7{ padding-bottom: 5rem !important; }
  .ps-sm-7{ padding-left:   5rem !important; }
  .pe-sm-7{ padding-right:  5rem !important; }
  .px-sm-7{ padding-left:   5rem !important; padding-right:  5rem !important; }
  .py-sm-7{ padding-top:    5rem !important; padding-bottom: 5rem !important; }

  .m-sm-8{  margin:        6rem !important; }
  .mt-sm-8{ margin-top:    6rem !important; }
  .mb-sm-8{ margin-bottom: 6rem !important; }
  .ms-sm-8{ margin-left:   6rem !important; }
  .me-sm-8{ margin-right:  6rem !important; }
  .mx-sm-8{ margin-left:   6rem !important; margin-right:  6rem !important; }
  .my-sm-8{ margin-top:    6rem !important; margin-bottom: 6rem !important; }
  .p-sm-8{  padding:        6rem !important; }
  .pt-sm-8{ padding-top:    6rem !important; }
  .pb-sm-8{ padding-bottom: 6rem !important; }
  .ps-sm-8{ padding-left:   6rem !important; }
  .pe-sm-8{ padding-right:  6rem !important; }
  .px-sm-8{ padding-left:   6rem !important; padding-right:  6rem !important; }
  .py-sm-8{ padding-top:    6rem !important; padding-bottom: 6rem !important; }
}

@media (min-width: 768px){
  .m-md-6{  margin:        4rem !important; }
  .mt-md-6{ margin-top:    4rem !important; }
  .mb-md-6{ margin-bottom: 4rem !important; }
  .ms-md-6{ margin-left:   4rem !important; }
  .me-md-6{ margin-right:  4rem !important; }
  .mx-md-6{ margin-left:   4rem !important; margin-right:  4rem !important; }
  .my-md-6{ margin-top:    4rem !important; margin-bottom: 4rem !important; }
  .p-md-6{  padding:        4rem !important; }
  .pt-md-6{ padding-top:    4rem !important; }
  .pb-md-6{ padding-bottom: 4rem !important; }
  .ps-md-6{ padding-left:   4rem !important; }
  .pe-md-6{ padding-right:  4rem !important; }
  .px-md-6{ padding-left:   4rem !important; padding-right:  4rem !important; }
  .py-md-6{ padding-top:    4rem !important; padding-bottom: 4rem !important; }

  .m-md-7{  margin:        5rem !important; }
  .mt-md-7{ margin-top:    5rem !important; }
  .mb-md-7{ margin-bottom: 5rem !important; }
  .ms-md-7{ margin-left:   5rem !important; }
  .me-md-7{ margin-right:  5rem !important; }
  .mx-md-7{ margin-left:   5rem !important; margin-right:  5rem !important; }
  .my-md-7{ margin-top:    5rem !important; margin-bottom: 5rem !important; }
  .p-md-7{  padding:        5rem !important; }
  .pt-md-7{ padding-top:    5rem !important; }
  .pb-md-7{ padding-bottom: 5rem !important; }
  .ps-md-7{ padding-left:   5rem !important; }
  .pe-md-7{ padding-right:  5rem !important; }
  .px-md-7{ padding-left:   5rem !important; padding-right:  5rem !important; }
  .py-md-7{ padding-top:    5rem !important; padding-bottom: 5rem !important; }

  .m-md-8{  margin:        6rem !important; }
  .mt-md-8{ margin-top:    6rem !important; }
  .mb-md-8{ margin-bottom: 6rem !important; }
  .ms-md-8{ margin-left:   6rem !important; }
  .me-md-8{ margin-right:  6rem !important; }
  .mx-md-8{ margin-left:   6rem !important; margin-right:  6rem !important; }
  .my-md-8{ margin-top:    6rem !important; margin-bottom: 6rem !important; }
  .p-md-8{  padding:        6rem !important; }
  .pt-md-8{ padding-top:    6rem !important; }
  .pb-md-8{ padding-bottom: 6rem !important; }
  .ps-md-8{ padding-left:   6rem !important; }
  .pe-md-8{ padding-right:  6rem !important; }
  .px-md-8{ padding-left:   6rem !important; padding-right:  6rem !important; }
  .py-md-8{ padding-top:    6rem !important; padding-bottom: 6rem !important; }
}

@media (min-width: 992px){
  .m-lg-6{  margin:        4rem !important; }
  .mt-lg-6{ margin-top:    4rem !important; }
  .mb-lg-6{ margin-bottom: 4rem !important; }
  .ms-lg-6{ margin-left:   4rem !important; }
  .me-lg-6{ margin-right:  4rem !important; }
  .mx-lg-6{ margin-left:   4rem !important; margin-right:  4rem !important; }
  .my-lg-6{ margin-top:    4rem !important; margin-bottom: 4rem !important; }
  .p-lg-6{  padding:        4rem !important; }
  .pt-lg-6{ padding-top:    4rem !important; }
  .pb-lg-6{ padding-bottom: 4rem !important; }
  .ps-lg-6{ padding-left:   4rem !important; }
  .pe-lg-6{ padding-right:  4rem !important; }
  .px-lg-6{ padding-left:   4rem !important; padding-right:  4rem !important; }
  .py-lg-6{ padding-top:    4rem !important; padding-bottom: 4rem !important; }

  .m-lg-7{  margin:        5rem !important; }
  .mt-lg-7{ margin-top:    5rem !important; }
  .mb-lg-7{ margin-bottom: 5rem !important; }
  .ms-lg-7{ margin-left:   5rem !important; }
  .me-lg-7{ margin-right:  5rem !important; }
  .mx-lg-7{ margin-left:   5rem !important; margin-right:  5rem !important; }
  .my-lg-7{ margin-top:    5rem !important; margin-bottom: 5rem !important; }
  .p-lg-7{  padding:        5rem !important; }
  .pt-lg-7{ padding-top:    5rem !important; }
  .pb-lg-7{ padding-bottom: 5rem !important; }
  .ps-lg-7{ padding-left:   5rem !important; }
  .pe-lg-7{ padding-right:  5rem !important; }
  .px-lg-7{ padding-left:   5rem !important; padding-right:  5rem !important; }
  .py-lg-7{ padding-top:    5rem !important; padding-bottom: 5rem !important; }

  .m-lg-8{  margin:        6rem !important; }
  .mt-lg-8{ margin-top:    6rem !important; }
  .mb-lg-8{ margin-bottom: 6rem !important; }
  .ms-lg-8{ margin-left:   6rem !important; }
  .me-lg-8{ margin-right:  6rem !important; }
  .mx-lg-8{ margin-left:   6rem !important; margin-right:  6rem !important; }
  .my-lg-8{ margin-top:    6rem !important; margin-bottom: 6rem !important; }
  .p-lg-8{  padding:        6rem !important; }
  .pt-lg-8{ padding-top:    6rem !important; }
  .pb-lg-8{ padding-bottom: 6rem !important; }
  .ps-lg-8{ padding-left:   6rem !important; }
  .pe-lg-8{ padding-right:  6rem !important; }
  .px-lg-8{ padding-left:   6rem !important; padding-right:  6rem !important; }
  .py-lg-8{ padding-top:    6rem !important; padding-bottom: 6rem !important; }
}

@media (min-width: 1200px){
  .m-xl-6{  margin:        4rem !important; }
  .mt-xl-6{ margin-top:    4rem !important; }
  .mb-xl-6{ margin-bottom: 4rem !important; }
  .ms-xl-6{ margin-left:   4rem !important; }
  .me-xl-6{ margin-right:  4rem !important; }
  .mx-xl-6{ margin-left:   4rem !important; margin-right:  4rem !important; }
  .my-xl-6{ margin-top:    4rem !important; margin-bottom: 4rem !important; }
  .p-xl-6{  padding:        4rem !important; }
  .pt-xl-6{ padding-top:    4rem !important; }
  .pb-xl-6{ padding-bottom: 4rem !important; }
  .ps-xl-6{ padding-left:   4rem !important; }
  .pe-xl-6{ padding-right:  4rem !important; }
  .px-xl-6{ padding-left:   4rem !important; padding-right:  4rem !important; }
  .py-xl-6{ padding-top:    4rem !important; padding-bottom: 4rem !important; }

  .m-xl-7{  margin:        5rem !important; }
  .mt-xl-7{ margin-top:    5rem !important; }
  .mb-xl-7{ margin-bottom: 5rem !important; }
  .ms-xl-7{ margin-left:   5rem !important; }
  .me-xl-7{ margin-right:  5rem !important; }
  .mx-xl-7{ margin-left:   5rem !important; margin-right:  5rem !important; }
  .my-xl-7{ margin-top:    5rem !important; margin-bottom: 5rem !important; }
  .p-xl-7{  padding:        5rem !important; }
  .pt-xl-7{ padding-top:    5rem !important; }
  .pb-xl-7{ padding-bottom: 5rem !important; }
  .ps-xl-7{ padding-left:   5rem !important; }
  .pe-xl-7{ padding-right:  5rem !important; }
  .px-xl-7{ padding-left:   5rem !important; padding-right:  5rem !important; }
  .py-xl-7{ padding-top:    5rem !important; padding-bottom: 5rem !important; }

  .m-xl-8{  margin:        6rem !important; }
  .mt-xl-8{ margin-top:    6rem !important; }
  .mb-xl-8{ margin-bottom: 6rem !important; }
  .ms-xl-8{ margin-left:   6rem !important; }
  .me-xl-8{ margin-right:  6rem !important; }
  .mx-xl-8{ margin-left:   6rem !important; margin-right:  6rem !important; }
  .my-xl-8{ margin-top:    6rem !important; margin-bottom: 6rem !important; }
  .p-xl-8{  padding:        6rem !important; }
  .pt-xl-8{ padding-top:    6rem !important; }
  .pb-xl-8{ padding-bottom: 6rem !important; }
  .ps-xl-8{ padding-left:   6rem !important; }
  .pe-xl-8{ padding-right:  6rem !important; }
  .px-xl-8{ padding-left:   6rem !important; padding-right:  6rem !important; }
  .py-xl-8{ padding-top:    6rem !important; padding-bottom: 6rem !important; }
}

@media (min-width: 1400px){
  .m-xxl-6{  margin:        4rem !important; }
  .mt-xxl-6{ margin-top:    4rem !important; }
  .mb-xxl-6{ margin-bottom: 4rem !important; }
  .ms-xxl-6{ margin-left:   4rem !important; }
  .me-xxl-6{ margin-right:  4rem !important; }
  .mx-xxl-6{ margin-left:   4rem !important; margin-right:  4rem !important; }
  .my-xxl-6{ margin-top:    4rem !important; margin-bottom: 4rem !important; }
  .p-xxl-6{  padding:        4rem !important; }
  .pt-xxl-6{ padding-top:    4rem !important; }
  .pb-xxl-6{ padding-bottom: 4rem !important; }
  .ps-xxl-6{ padding-left:   4rem !important; }
  .pe-xxl-6{ padding-right:  4rem !important; }
  .px-xxl-6{ padding-left:   4rem !important; padding-right:  4rem !important; }
  .py-xxl-6{ padding-top:    4rem !important; padding-bottom: 4rem !important; }

  .m-xxl-7{  margin:        5rem !important; }
  .mt-xxl-7{ margin-top:    5rem !important; }
  .mb-xxl-7{ margin-bottom: 5rem !important; }
  .ms-xxl-7{ margin-left:   5rem !important; }
  .me-xxl-7{ margin-right:  5rem !important; }
  .mx-xxl-7{ margin-left:   5rem !important; margin-right:  5rem !important; }
  .my-xxl-7{ margin-top:    5rem !important; margin-bottom: 5rem !important; }
  .p-xxl-7{  padding:        5rem !important; }
  .pt-xxl-7{ padding-top:    5rem !important; }
  .pb-xxl-7{ padding-bottom: 5rem !important; }
  .ps-xxl-7{ padding-left:   5rem !important; }
  .pe-xxl-7{ padding-right:  5rem !important; }
  .px-xxl-7{ padding-left:   5rem !important; padding-right:  5rem !important; }
  .py-xxl-7{ padding-top:    5rem !important; padding-bottom: 5rem !important; }

  .m-xxl-8{  margin:        6rem !important; }
  .mt-xxl-8{ margin-top:    6rem !important; }
  .mb-xxl-8{ margin-bottom: 6rem !important; }
  .ms-xxl-8{ margin-left:   6rem !important; }
  .me-xxl-8{ margin-right:  6rem !important; }
  .mx-xxl-8{ margin-left:   6rem !important; margin-right:  6rem !important; }
  .my-xxl-8{ margin-top:    6rem !important; margin-bottom: 6rem !important; }
  .p-xxl-8{  padding:        6rem !important; }
  .pt-xxl-8{ padding-top:    6rem !important; }
  .pb-xxl-8{ padding-bottom: 6rem !important; }
  .ps-xxl-8{ padding-left:   6rem !important; }
  .pe-xxl-8{ padding-right:  6rem !important; }
  .px-xxl-8{ padding-left:   6rem !important; padding-right:  6rem !important; }
  .py-xxl-8{ padding-top:    6rem !important; padding-bottom: 6rem !important; }
}

/* Extend Bootstrap row-cols past the default max of 6 (Bootstrap 5 stops at 6) */
@media (min-width: 1200px){
  .row-cols-xl-7 > *{ flex: 0 0 auto; width: 14.2857%; }
}
@media (min-width: 1400px){
  .row-cols-xxl-8 > *{ flex: 0 0 auto; width: 12.5%; }
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ overflow-x: hidden; }
body{
  margin: 0;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text);
  /* background: linear-gradient(180deg, #ffffff 0 150px, var(--bg) 150px); */
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: var(--lh-body);
}

/* Global background decorations (match mockup feel) */
body{
  position: relative;
  overflow-x: hidden;
}
/* Disabled: global background gradient decoration (not in design)
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 420px at 50% 120px, rgba(11,74,162,0.07), transparent 60%),
    radial-gradient(900px 360px at 80% 780px, rgba(14,107,220,0.06), transparent 60%),
    radial-gradient(800px 340px at 20% 1200px, rgba(15,23,42,0.04), transparent 60%),
    radial-gradient(1200px 480px at 60% 2100px, rgba(11,74,162,0.05), transparent 65%),
    radial-gradient(1200px 500px at 45% 3200px, rgba(15,23,42,0.035), transparent 70%);
}
*/



main{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
main::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 620px;
  width: min(1600px, 160vw);
  height: 720px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(closest-side at 50% 35%, rgba(255,255,255,0.65), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
a{ color: #09347b; text-decoration: none; }
button, input{ font: inherit; }
img{ max-width: 100%; display: block; }

/* Aspect-ratio utility (ported from main.css keeps --aspect-ratio /
 --aspect-ratio-s elements sized; refine later). */
.aspect-ratio{
  display: flex;
  margin: 0;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}
.aspect-ratio::before{
  content: '';
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.aspect-ratio::after{
  content: '';
  display: table;
  clear: both;
}
.aspect-ratio img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
  fill: #ffffff;
}
.aspect-ratio.loaded{ background-color: transparent; }
@media (max-width: 767px){
  .aspect-ratio-s::before{
    padding-bottom: calc(100% / (var(--aspect-ratio-s)));
  }
}

/* ===================== LIGHTGALLERY ===================== */
.lg-on,
.lg-overlay-open{
  overflow: hidden;
}
.lg-container{
  display: none;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.lg-container.lg-show{
  display: block;
}
.lg-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.30);
  opacity: 0;
  transition: opacity 333ms ease;
}
.lg-backdrop.in{
  opacity: 1;
}
.lg-outer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  outline: 0;
  text-align: left;
  transition: opacity 150ms ease;
}
.lg-outer.lg-visible,
.lg-outer.lg-zoom-from-image{
  opacity: 1;
}
.lg-outer *,
.lg-outer *::before,
.lg-outer *::after{
  box-sizing: border-box;
}
.lg-content,
.lg-inner{
  position: absolute;
  inset: 0;
}
.lg-content{
  top: 0 !important;
  bottom: 0 !important;
}
.lg-inner{
  width: 100%;
  white-space: nowrap;
}
.lg-item{
  display: none !important;
}
.lg-css .lg-current,
.lg-css3 .lg-current,
.lg-css3 .lg-next-slide,
.lg-css3 .lg-prev-slide{
  display: inline-block !important;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item{
  opacity: 0;
}
.lg-css3.lg-slide.lg-use-css3 .lg-prev-slide{
  transform: translate3d(-100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-next-slide{
  transform: translate3d(100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-current{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-current,
.lg-css3.lg-slide.lg-use-css3 .lg-next-slide,
.lg-css3.lg-slide.lg-use-css3 .lg-prev-slide{
  transition: transform 400ms ease, opacity 100ms ease;
}
.lg-img-wrap,
.lg-item{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.lg-img-wrap{
  white-space: nowrap;
  font-size: 0;
}
.lg-img-wrap::before,
.lg-item::before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.lg-object{
  display: inline-block;
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.lg-toolbar{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10002;
  width: 100%;
}
.lg-next,
.lg-prev,
.lg-toolbar .lg-close{
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 68px !important;
  height: 68px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #e7ebee !important;
  color: #111111;
  cursor: pointer;
  box-shadow: none !important;
  outline: 0;
}
.lg-next,
.lg-prev{
  position: absolute;
  top: 50%;
  z-index: 10002;
  transform: translateY(-50%);
}
.lg-prev{
  left: 15px;
}
.lg-next{
  right: 15px;
}
.lg-toolbar .lg-close{
  float: right;
  margin: 25px 35px 0 0;
}
.lg-toolbar .lg-close::before,
.lg-toolbar .lg-close::after{
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: url("../images/24-010.svg") no-repeat center center / contain;
}
.lg-toolbar .lg-close::before{
  display: none;
}
.lg-next::before,
.lg-prev::before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url("../images/24-007.svg") no-repeat center center / contain;
}
.lg-next::before{
  margin-right: 0;
}
.lg-prev::before{
  margin-left: 0;
  transform: rotate(180deg);
}
.lg-single-item .lg-next,
.lg-single-item .lg-prev{
  display: flex !important;
}
.lg-sub-html,
.lg-counter,
.lg-thumb-outer,
.lg-components{
  display: none;
}
@media (max-width: 768px){
  .lg-next,
  .lg-prev,
  .lg-toolbar .lg-close{
    width: 44px !important;
    height: 44px !important;
  }
  .lg-prev{
    left: 10px;
  }
  .lg-next{
    right: 10px;
  }
  .lg-toolbar .lg-close{
    margin: 14px 14px 0 0;
  }
  .lg-toolbar .lg-close::before,
  .lg-toolbar .lg-close::after{
    width: 12px;
    height: 12px;
  }
  .lg-next::before,
  .lg-prev::before{
    width: 12px;
    height: 12px;
  }
}

.container,
.wrapper{
  width: min(var(--container), calc(100% - 32px));
  margin-inline: auto;
}
.wrapper--xxxl,
.wrapper--xxl,
.wrapper--big{
  --container: var(--subra-container-xxl);
}
.wrapper--middle,
.wrapper--xl{
  --container: var(--subra-container-xl);
}
.wrapper--m,
.wrapper--md{
  --container: var(--subra-container-lg);
}
.wrapper--s,
.wrapper--sm{
  --container: var(--subra-container-md);
}
.wrapper--xs{
  --container: var(--subra-container-sm);
}
.wrapper--100,
.wrapper--width-100,
.wrapper.no-wrapper,
.no-wrapper{
  width: 100%;
  max-width: none;
}

table.table {
  border-color: transparent;
}

.muted{ color: var(--muted); }
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transform: translateY(-160%);
  z-index: 9999;
}
.skip-link:focus{ transform: translateY(0); }

/* Header */
.site-header{ position: sticky; top: 0; z-index: 50; }
.topbar{
  background: #e4ebf2;
  /* border-bottom: 1px solid var(--line); */
  max-height: 60px;
  overflow: hidden;
  transition: max-height 300ms ease;
}
.header--compact .topbar{ max-height: 0; }
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
}
.topbar__left{ display: flex; align-items: center; gap: 10px; font-size: 17px; font-style: italic; color: #09347b; }
.topbar__tel{ font-weight: 600; }
.topbar__right{ display: flex; gap: 6px; color: #09347b; font-size: 14px;; }

.headbar{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  /* border-bottom: 1px solid var(--line); */
}
.headbar__inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
}
.headbar__left{
  display: flex;
  align-items: center;
  gap: 14px;
}
.headbar__inner > .actions{ justify-self: end; }

.brand{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
}
.brand__mark{ font-weight: 800; letter-spacing: -0.5px; font-size: 22px; }
.brand__mark--accent{ color: var(--primary-2); }
.brand__tag{ font-family: Montserrat, sans-serif; font-size: 11px; color: var(--muted); font-weight: 600; }
.brand--footer .brand__mark{ font-size: 18px; }
.brand__img{
  display: inline-block;
  line-height: 0;
}
.brand__img img{
  display: block;
  height: auto;
  max-height: 70px;
  width: auto;
  transition: max-height 300ms ease;
}
.header--compact .brand__img img{ max-height: 50px; }

.nav{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.headbar__left{ flex-wrap: nowrap; }
.headbar__left .nav,
.headbar__left .pill{ flex-shrink: 0; }
.nav--tabs{ gap: 7px; }
.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #edf1f6;
  font-size: var(--fs-13);
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: center;
  color: var(--primary);
  white-space: nowrap;
  filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.28));
}

.nav--tabs a.pill:nth-child(2){max-width: 118px; background: #e4ebf2 url('/frontend/images-new/b2_menu_promotion.png') center / cover no-repeat; color: #ff383c; }

.nav--tabs a.pill:nth-child(3){ max-width: 90px; background: #edf1f6 url('/frontend/images-new/b3_menu_action.png') center / cover no-repeat; color: #ff383c; }
.pill--menu{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-inline: 20px;
  font-weight: 800;
  cursor: pointer;
  background: #d1dde8 url('/frontend/images-new/b1_menu_products.png') center / cover no-repeat;
  color: #09347b;
  max-width: 136px;
}
.pill__icon{
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;

}
.pill__icon svg{ width: 18px; height: 18px; }
.pill__icon--close{ display: none; }
.pill--menu[aria-expanded="true"] .pill__icon--menu{ display: none; }
.pill--menu[aria-expanded="true"] .pill__icon--close{ display: inline-grid; }
.pill--menu[aria-expanded="true"]{
  background: #dbe4f4;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(11,74,162,0.18);
}
.pill:hover{
  background: #dfe6f3;
  filter: none;
}
.pill--active{
  background: #dfe7ef;
}

.search{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #b7b7b7;
  background: #f6f4f4;
  border-radius: 999px;
  padding: 3px 6px 3px 20px;
  width: 450px;
}
.search__input{
  border: none;
  outline: none;
  width: 100%;
  color: #000;
  background: transparent;
  font-size: var(--fs-14);
}

.main-search__input::placeholder {
  color: #000;
  opacity: 1;
}

.search__input::placeholder{ color: var(--muted); }
.search__btn{
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #d7d7d7;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.main-search__button{
  color: #015394;
}
.search__btn:hover{ filter: brightness(1.06); }
.search__btn svg{ width: 18px; height: 18px; }
.mobile-search-float{
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 70;
  width: 42px;
  height: 42px;
  padding: 3px;
  border: 1px solid #b7b7b7;
  border-radius: 999px;
  background: #f6f4f4;
  color: #015394;
  box-shadow: 0 10px 24px rgba(9, 52, 123, .18);
  place-items: center;
  cursor: pointer;
  transform: translateY(-8px);
  transition: opacity 220ms ease, visibility 220ms ease, transform 220ms ease;
}
/* Modals add "overflow-hidden" to <html> while open (main-un.js) — hide this
   floating button then instead of fighting its stacking context. */
html.overflow-hidden .mobile-search-float{
  opacity: 0;
  pointer-events: none;
}
.mobile-search-float svg{
  width: 18px;
  height: 18px;
}

/* Header search autocomplete output (old #main-search-output kept for JS) */
.search{ position: relative; }
#main-search-output{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 65;
  max-height: 70vh;
  padding: 8px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#main-search-output.hidden{ display: none; }

.search{ position: static; }
.headbar__inner{ position: relative; }
#main-search-output{ top: calc(100% - 7px); }
.autocomplete__products{
  flex: 3 1 0;
  min-width: 0;
}
.autocomplete__products > a{
  display: block;
  color: inherit;
  text-decoration: none;
}
.autocomplete__products > a + a{
  border-top: 1px solid var(--line);
}
.autocomplete__products-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  transition: background-color 160ms ease;
}
.autocomplete__products > a:hover .autocomplete__products-item{
  background: #f3f7ff;
}
.autocomplete__products-item-preview{
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.autocomplete__products-item-preview img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.autocomplete__products-item-content{
  flex: 1 1 auto;
  min-width: 0;
}
.autocomplete__products-item-description p{
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.autocomplete__products-item-price{
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 12px;
  text-align: right;
  white-space: nowrap;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--primary);
}
.autocomplete__lists{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--line);
}
.autocomplete__lists-title{
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--primary);
}
.autocomplete__lists-item ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.autocomplete__lists-li{
  margin: 0;
}
.autocomplete__lists-link{
  display: block;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
}
.autocomplete__lists-link:hover{
  background: #f3f7ff;
  color: var(--primary);
}
.autocomplete__message{
  flex: 1 1 auto;
  padding: 14px 8px;
  font-size: var(--fs-14);
  color: var(--muted);
}
@keyframes search-result-in{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: none;
  }
}
.autocomplete__products > a,
.autocomplete__lists,
.autocomplete__message{
  animation: search-result-in 240ms ease both;
}
.autocomplete__products > a:nth-child(2){ animation-delay: 45ms; }
.autocomplete__products > a:nth-child(3){ animation-delay: 90ms; }
.autocomplete__products > a:nth-child(4){ animation-delay: 135ms; }
.autocomplete__products > a:nth-child(5){ animation-delay: 180ms; }
.autocomplete__lists{ animation-delay: 225ms; }
@media (prefers-reduced-motion: reduce){
  .autocomplete__products > a,
  .autocomplete__lists,
  .autocomplete__message{
    animation: none;
  }
}
@media (min-width: 1200px){
  #main-search-output{
    left: 50%;
    right: auto;
    width: 720px;
    max-width: 100%;
    transform: translateX(-50%);
  }
  #main-search-output.autocomplete:not(.hidden){
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  .autocomplete__lists{
    flex: 2 1 0;
    min-width: 0;
    margin-top: 0;
    padding: 10px 12px;
    border-top: 0;
    border-left: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }
}
@media (max-width: 575.98px){
  .autocomplete__products-item-preview{
    width: 56px;
    height: 56px;
  }
  .autocomplete__products-item-price{
    font-size: var(--fs-13);
  }
}

.actions{
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  color: var(--primary);
}
.icon-btn svg{ width: 18px; height: 18px; }
.icon-btn:hover{ border-color: rgba(11,74,162,0.35); }
.icon-btn--primary{
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color: white;
  border-color: rgba(11,74,162,0.35);
}
.icon-btn--sm{
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.icon-btn--sm{
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.badge{
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid var(--surface);
}

.chip{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.chip--ghost{ background: transparent; }

.headbar__burger{ display: none; }
.headbar__burger-icon--close{ display: none; }
.headbar__burger[aria-expanded="true"] .headbar__burger-icon--menu{ display: none; }
.headbar__burger[aria-expanded="true"] .headbar__burger-icon--close{ display: block; }

/* User actions ported from the old header (old classes kept for JS),
 restyled for the light header. Collapsed = icon only; on hover the item
 expands to reveal its label and a bordered pill appears (old animation). */
.actions .user-nav{
  display: flex;
  align-items: center;
  gap: 36px;
}
.user-nav__item{ position: relative; }
.user-nav__item-inner{ display: flex; ; }
.user-nav__link{
  display: inline-flex;
  align-items: center;
  padding: 0;
  position: relative;
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
}
/* Circle background = icons_bg.png on its own container; shadow on the
   container, not on the icon. */
.user-nav__icon{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  position: relative;
  filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.28));
  transition: transform 200ms ease;
}
/* Background sphere lives on a pseudo-element so it can spin on hover
   without rotating the icon glyph above it. */
.user-nav__icon::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
  transition: transform 350ms ease;
  z-index: -1;
}
.user-nav__item:hover .user-nav__icon{
  transform: translateY(-1px);
  filter: none;
}
.user-nav__item:hover .user-nav__icon::before{
  transform: rotate(180deg);
}
.user-nav__link-icon{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.user-nav__link-text{ display: none; }
.user-nav__link-counter{
  position: absolute;
  top: -3px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  background: var(--danger);
  border: 2px solid var(--surface);
  border-radius: 999px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.user-nav__link-counter.is-active{ opacity: 1; visibility: visible; }

.lang-switch{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  position: relative;
  isolation: isolate;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.28));
  transition: transform 200ms ease;
}
.lang-switch::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('../images-new/button_language-selection.png') center / cover no-repeat;
  transition: transform 350ms ease;
  z-index: -1;
}
.lang-switch:hover{
  transform: translateY(-1px);
  filter: none;
}
.lang-switch:hover::before{
  transform: rotate(180deg);
}

@supports (background-image: -webkit-named-image(i)){
  .user-nav__icon{
    isolation: isolate;
    filter: none;
    box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.28);
  }
  .user-nav__icon::before{
    inset: -1px;
  }
  .user-nav__item:hover .user-nav__icon{
    box-shadow: none;
  }
  .lang-switch{
    filter: none;
    box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.28);
  }
  .lang-switch::before{
    inset: -1px;
  }
  .lang-switch:hover{
    box-shadow: none;
  }
}

/* Mini basket dropdown (revealed on hover). Minimal container for now
 internal styling will be refined when we build the cart block. */
.user-nav__item .mini-basket{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 420px;
  max-width: 90vw;
  padding: 0;
  background: #f2f5f9;
  /* border: 1px solid var(--line); */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
  z-index: 60;
}
.user-nav__item:hover .mini-basket{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mini basket flyout — internal content (matches Figma cart dropdown).
   Markup: _header_basket.htm + checkout/.../partial/_product.htm. CSS only. */
.mini-basket{
  width: 420px;
  padding: 0;
}
/* Pointer arrow towards the cart icon (matches the light flyout background).
   Icon is 48px and the flyout is anchored right:0 to the 48px cart item, so the
   icon centre is 24px from the right edge — centre the 14px arrow there. */
.mini-basket::before{
  content: "";
  position: absolute;
  top: -7px;
  right: 17px;
  width: 14px;
  height: 14px;
  background: #f2f5f9;
  /* border-left: 1px solid var(--line);
  border-top: 1px solid var(--line); */
  transform: rotate(45deg);
  z-index: 1;
}
/* Empty state: the "cart is empty" header is hidden by default and only
   revealed when JS marks the flyout as empty (mirrors main.css behavior). */
.mini-basket__top{ display: none; padding: 18px 18px 6px; }
.mini-basket.is-empty .mini-basket__top{ display: block; }
.mini-basket.is-empty .mini-basket__bottom{ display: none; }
.mini-basket .mini-basket__header{
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: 400;
  color: var(--text);
  text-align: center;
  padding: 14px 18px 12px;
}
.mini-basket__top .mini-basket__header{ padding: 0 0 6px; color: var(--muted); }

/* Title sits on the light flyout background, above the white card.
   The form is transparent; the card is the body below the title. */
#CartUpdateHeader{
  background: transparent;
}
.mini-basket__bottom-body{
  margin: 0 14px 14px;
  padding: 16px 10px 10px;
  background: var(--surface);
  /* border: 1px solid var(--line); */
  border-radius: var(--radius);
}
.mini-basket-list{
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 0 14px;
}

/* Item row — two columns: left (image + name + price) and an aside column
   (trash top, counter bottom) separated by the aside's left border. */
.mini-basket-item{
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 76px;
  padding: 14px 0;
}
/* horizontal separator under each product, inset 15px left/right */
.mini-basket-list__item{ position: relative; }
.mini-basket-list__item::after{
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
/* the last (bottom) separator spans the full card width, like the totals below */
.mini-basket-list__item:last-child::after{
  left: 0;
  right: 0;
}
.mini-basket-item__preview{
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.mini-basket-item__preview img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}
.mini-basket-item__content{
  flex: 1 1 auto;
  min-width: 0;
}
.mini-basket-item__description p{
  margin: 0 0 8px;
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400;
}
.mini-basket-item__controls{
  display: flex;
  align-items: center;
}
.mini-basket-item__price{
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--text);
}
.mini-basket-item__price:has(+ .mini-basket-item__price--old){
  color: var(--danger);
}
.mini-basket-item__price--old{
  margin-top: 2px;
  color: var(--text) !important;
  text-decoration: line-through;
}
/* Right column: trash on top, counter on bottom; left border = vertical divider */
.mini-basket-item__aside{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 15px;
  border-left: 1px solid var(--line);
}

/* Remove (trash) button */
.mini-basket-item__remove{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease;
}
.mini-basket-item__remove:hover{ color: var(--danger); }
.mini-basket-item__remove-icon{
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
}

/* Promo/gift sub-items have no trash or counter — no aside column */
.mini-basket-item--gift{ min-height: 0; }

/* Quantity counter — only the number is circled; +/- have no border */
.mini-basket .counter-input{
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
}
.mini-basket .counter-input__button{
  position: relative;
  width: 26px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.mini-basket .counter-input__button::before{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.mini-basket .counter-input__button--decrease::before{ content: "−"; }
.mini-basket .counter-input__button--increase::before{ content: "+"; }
.mini-basket .counter-input__button:disabled{ opacity: .35; cursor: default; }
.mini-basket .counter-input__element{
  width: 32px;
  height: 32px;
  margin: 0 2px;
  border: 1px solid #000;
  border-radius: 999px;
  text-align: center;
  font-size: var(--fs-14);
  font-weight: 400;
  background: var(--surface);
  -moz-appearance: textfield;
}
.mini-basket .counter-input__element::-webkit-outer-spin-button,
.mini-basket .counter-input__element::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Free-delivery / remaining-to-free-delivery message */
.mini-basket__info{
  margin: 0 0 6px;
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: #197b30;
  text-align: right;
}

/* Totals table — right-aligned cluster (label + value); even 6px row padding
   gives equal vertical gaps between the info, rows and buttons. */
.mini-basket__table{
  width: auto;
  margin: 0 0 0 auto;
  border-collapse: collapse;
}
.mini-basket__table td{
  padding: 6px 0;
  font-size: var(--fs-13);
  color: var(--muted);
  text-align: right;
}
.mini-basket__table td:first-child{ padding-right: 10px; }
.mini-basket__table td:last-child{
  text-align: right;
  font-weight: 600;
  color: var(--text);
}
.mini-basket__table tr:last-child td{
  font-size: 17px;
  font-weight: 700;
  color: #09347b;
}
/* full-width (colspan) rows align flush right, like the Общо value */
.mini-basket__table td[colspan]{ padding-right: 0; }
/* Subtotal / savings block (above the free-delivery message) — black, bold, right */
.mini-basket__sum{
  margin: 0 0 12px;
  text-align: right;
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}
/* "i" info icon next to Доставка — blue circle with white italic i */
.mini-basket__info-tip{
  position: relative;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}
.mini-basket__info-icon{
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  cursor: pointer;
  vertical-align: middle;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color: #fff;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* delivery info popover — hidden; shown on hover (desktop) or click/tap (mobile) */
.mini-basket__info-pop{
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: -4px;
  width: 280px;
  max-width: 80vw;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
  white-space: normal;
  z-index: 70;
}
/* click/tap (works everywhere, incl. touch) */
.mini-basket__info-tip:focus-within .mini-basket__info-pop{ display: block; }
/* hover (desktop / hover-capable pointers) */
@media (hover: hover){
  .mini-basket__info-tip:hover .mini-basket__info-pop{ display: block; }
}

/* Buttons row */
.mini-basket .buttons-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 0;
  margin-bottom: 10px;
}
/* keep both labels on a single line inside the narrow flyout */
.mini-basket .buttons-row .button{
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* image-backed buttons (scoped to the mini-basket only).
   drop-shadow follows the PNG's rounded shape, so the shadow hugs the button
   art instead of leaking past the transparent corners like box-shadow does. */
.mini-basket .buttons-row .button--sub{
  background: url('../images-new/to_cart_bg.png') center / 100% 100% no-repeat;
  border: 0;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
  color: var(--primary);
}
.mini-basket .buttons-row .button:not(.button--sub){
  background: url('../images-new/finish_order.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
.button--sm{
  height: 42px;
  padding: 0 18px;
  font-size: var(--fs-12);
}
.button--100{ flex: 1 1 0; width: 100%; }

/* Hero */
.hero{ padding: 16px 0 22px; position: relative; }
.hero::before{
  content:"";
  position: absolute;
  left: 50%;
  top: -160px;
  width: min(1700px, 170vw);
  height: 620px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(900px 320px at 45% 40%, rgba(11,74,162,0.08), transparent 65%),
    radial-gradient(760px 300px at 70% 55%, rgba(14,107,220,0.06), transparent 65%),
    radial-gradient(820px 320px at 30% 70%, rgba(15,23,42,0.04), transparent 70%),
    radial-gradient(900px 340px at 50% 100%, rgba(255,255,255,0.65), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.hero__shell{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  border: 1px solid var(--line);
}
.hero__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform 500ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.hero__slide{
  min-height: 310px;
  padding: 26px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: center;
  color: white;
  position: relative;
}
.hero__slide--image{
  padding: 0;
  display: block;
  min-height: unset;
  color: inherit;
}
.hero__slide--image::after{ display: none; }
.hero__media{
  display: block;
  width: 100%;
}
.hero__media img{
  display: block;
  width: 100%;
  height: auto;
}

/* Custom hero slide (uses real product images) */
.hero__slide--custom{
  padding: 0;
  display: block;
  min-height: 310px;
  background:
    radial-gradient(900px 280px at 10% 10%, rgba(255,255,255,0.35), transparent 55%),
    radial-gradient(700px 240px at 85% 20%, rgba(255,255,255,0.25), transparent 55%),
    linear-gradient(120deg, var(--primary) 0%, var(--primary-2) 45%, rgba(1,83,148,0.65) 130%);
}
.hero__slide--custom::after{ display: none; }
.hero-custom{
  height: 100%;
  min-height: 310px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: center;
  padding: 26px;
  color: white;
}
.hero-custom__badge{
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  width: fit-content;
  margin-bottom: 10px;
}
.hero-custom__title{
  margin: 0 0 4px;
  font-family: var(--font-display);
  letter-spacing: -0.6px;
  font-size: clamp(26px, 3.0vw, 40px);
  line-height: 1.05;
}
.hero-custom__subtitle{
  margin: 0 0 16px;
  opacity: 0.95;
  font-size: 14px;
  max-width: 52ch;
}
.hero-custom__cta{ display: flex; gap: 10px; flex-wrap: wrap; }
.hero-custom__stack{
  position: relative;
  height: 240px;
}
.hero-custom__item{
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 34px rgba(0,0,0,0.18);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero-custom__item img{
  width: 86%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.18));
}
.hero-custom__item--a{ left: 0; top: 24px; transform: rotate(-6deg); }
.hero-custom__item--b{ left: 110px; top: 0; transform: rotate(5deg); }
.hero-custom__item--c{ left: 220px; top: 34px; transform: rotate(-2deg); }
.hero__slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 280px at 20% 0%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(900px 220px at 85% 20%, rgba(255,255,255,0.18), transparent 52%);
  pointer-events: none;
}
.hero__slide--blue{ background: linear-gradient(120deg, var(--primary) 0%, var(--primary-2) 55%, rgba(1,83,148,0.55) 120%); }
.hero__slide--mint{ background: linear-gradient(120deg, #0ea5e9 0%, #22c55e 55%, #94a3b8 140%); }
.hero__slide--violet{ background: linear-gradient(120deg, #4c1d95 0%, #7c3aed 48%, #0ea5e9 140%); }

.hero__copy{ position: relative; z-index: 1; }
.hero__title{
  margin: 0 0 4px;
  font-family: var(--font-display);
  letter-spacing: -0.7px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
}
.hero__accent{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
}
.hero__subtitle{
  margin: 0 0 16px;
  opacity: 0.95;
  font-size: 14px;
  max-width: 52ch;
}
.hero__cta{ display: flex; gap: 10px; flex-wrap: wrap; }

.hero__art{ position: relative; z-index: 1; display: grid; place-items: center; }
.product-tower{ display: grid; grid-auto-flow: column; gap: 10px; align-items: end; }
.tower{ width: 56px; border-radius: 16px; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 16px 26px rgba(0,0,0,0.12); }
.tower--1{ height: 170px; }
.tower--2{ height: 210px; }
.tower--3{ height: 190px; }
.tower--4{ height: 230px; border-radius: 18px; }
.hero__blob{
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 18px 34px rgba(0,0,0,0.16);
}
.hero__rings{
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.22), transparent 45%),
    radial-gradient(circle at 65% 65%, rgba(255,255,255,0.18), transparent 55%);
  border: 2px dashed rgba(255,255,255,0.30);
  box-shadow: 0 18px 34px rgba(0,0,0,0.16);
}

.carousel-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  user-select: none;
}
.carousel-btn span{ font-size: 28px; line-height: 1; margin-top: -2px; }
.carousel-btn:hover{ background: rgba(255,255,255,0.16); }
.carousel-btn--prev{ left: 12px; }
.carousel-btn--next{ right: 12px; }

.dots{
  display: flex;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 2;
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.20);
  cursor: pointer;
}
.dot[aria-selected="true"]{
  width: 22px;
  background: rgba(255,255,255,0.90);
  border-color: rgba(255,255,255,0.70);
}

/* Feature row + brands */
.feature-row{
  margin-top: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(15,23,42,0.06);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.feature{
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  position: relative;
}
.feature__icon{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  display: grid;
  place-items: center;
}
.feature__icon img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.feature__text{ min-width: 0; }
.feature__title{ font-weight: 700; font-size: 12px; }
.feature__desc{ color: var(--muted); font-size: 12px; }
.feature__more{
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.feature + .feature::before{
  content:"";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: rgba(15,23,42,0.14);
}

.brands{
  margin-top: 12px;
  background: rgba(255,255,255,0.80);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px;
  overflow: hidden;
}
.brands__img{ display: block; }
.brands__img img{ display:block; width: 100%; height: auto; }

/* Sections */
.section{ padding: 34px 0; }
.breadcrumbs-section{
  padding: 18px;
}
.breadcrumbs-section.bgr-color{
  background: var(--bg);
}
.section.bgr-color-light,
.breadcrumbs-section.bgr-color-light{
  background: #f8f8f8;
}
.breadcrumbs-section--product{
  background: #f8f8f8;
  padding-bottom: 0;
}
.breadcrumbs-section--product .breadcrumb{
  margin-bottom: 0;
}
.breadcrumbs-section--product .breadcrumb-item [aria-current="page"]{
  color: #09347b;
  font-weight: 700;
}
.search-open:has(.product-block_backend) .product-banner--bannersInnerTop{
  background: #f8f8f8;
}
.search-open:has(.product-block_backend) .product-banner--bannersInnerBottom{
  padding: 32px 0 32px 0;
}
/* Само страницата "избрана категория" (има #category_with_filters — ID → печели
   по специфичност над правилото по-горе, което матва навсякъде заради продуктовите
   карти с .product-block_backend): без горен отстъп над банера. */
.search-open:has(#category_with_filters) .product-banner--bannersInnerBottom{
  padding: 0 0 32px 0;
}

@media (max-width: 767px){
  .search-open:has(.product-block_backend) .product-banner--bannersInnerBottom{
    padding: 11px 0 19px 0;
  }

  .breadcrumb .breadcrumb-item {
    font-size: 11px;;
  }

  .search__input{ 
    font-size: var(--fs-12);
  }
}
/* Слайдърите преди банера (свързани / "Друго от същата категория") дават 72px
   отдолу; на продуктовата страница го нулираме, за да остане 32px над банера. */
.main-content:has(.product-block_backend) .related-products{
  padding-bottom: 0;
}
@media (min-width: 769px){
  .main-content:has(.product-block_backend):not(:has(.product-banner--bannersInnerBottom)) .related-products--category{
    padding-bottom: 46px;
  }
}
@media (min-width: 1025px){
  .main-content:has(.product-block_backend):not(:has(.product-banner--bannersInnerBottom)) .related-products--category{
    padding-bottom: 54px;
  }
}

/* ===================== PRODUCT PAGE (.product-block_backend) ===================== */
.product-block_backend .product{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 30px;
  gap: 20px;
}
.product-block_backend .product__gallery{
  width: 100%;
  max-width: 50%;
  overflow: hidden;
}
.product-block_backend .product__gallery-video{
  margin-bottom: 20px;
}
.product-block_backend .product__gallery-video-btn{
  width: 56px;
  height: 56px;
  background: #f7f9f9;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}
.product-block_backend .product__info{
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 640px){
  .product-block_backend .product{
    margin-bottom: calc(30px + 70*(100vw - 640px)/ 560);
  }
}
@media (min-width: 1200px){
  .product-block_backend .product{
    margin-bottom: 100px;
  }
}
@media (max-width: 768px){
  .product-block_backend .product{
    flex-direction: column;
    margin-bottom: 40px;
  }
  .product-block_backend .product__gallery{
    max-width: inherit;
  }
  .product-block_backend .product__info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .product-block_backend .product__gallery-video-btn{
    width: 56px;
    position: absolute;
    left: 0;
  }
}

.product-block_backend .product-card__labels{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.product-block_backend .product-card__label{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}
.product-block_backend .product-card__label--discount,
.product-block_backend .product-card__label--discount1,
.product-block_backend .product-card__label--special-price{
  background: #E85D6B;
}
.product-block_backend .product-card__label--best-selling,
.product-block_backend .product-card__label--hit,
.product-block_backend .product-card__label--best-seller{
  background: #F4A84F;
}
.product-block_backend .product-card__label--new{
  background: #91bd88;
}

.product-block_backend .product__info-availability{
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.product-block_backend .product__info-availability-item{
  display: flex;
  gap: 8px;
  align-items: center;
}
.product-block_backend .product__info-availability-icon-check svg{
  color: #4CAF50;
}
.product-block_backend .product__info-availability-item-check{
  margin: 0;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.product-block_backend .product__info-title{
  font-size: 24px;
  font-weight: 700;
  margin: 16px 0 12px 0;
  color: #1a1a1a;
  line-height: 1.3;
}

.product-block_backend .product__info-price{
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.product-block_backend .product__info-price-new{
  font-size: 16px;
  font-weight: 700;
  color: #2E5A99;
}

.product-block_backend .product__info-second{
  margin-bottom: 16px;
  padding: 12px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #000;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.product-block_backend .product__info-second a {
  color: #09347b;
  text-transform: uppercase;
}

.product-block_backend .product__info-second-item{
  display: flex;
  gap: 4px;
}
.product-block_backend .product__info-second-title{
  margin: 0;
  color: #999;
  font-weight: 500;
}
.product-block_backend .product__info-second-text{
  margin: 0;
  color: #333;
}

.product-block_backend .product__info-rating{
  margin-bottom: 16px;
}

.product-block_backend .product__info-btns{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-block_backend .product__info-btns-add-basket{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-block_backend .counter-input{
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  width: fit-content;
}
.product-block_backend .counter-input__button{
  width: 40px;
  height: 40px;
  border: none;
  background: #fff;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
}
.product-block_backend .counter-input__button:hover{
  background: #f5f5f5;
}
.product-block_backend .counter-input__element{
  width: 50px;
  height: 40px;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
}

.product-block_backend .button.product__info-btns-add{
  background: #2E5A99;
  color: #fff;
  border: none;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  transition: background 0.2s;
}
.product-block_backend .button.product__info-btns-add:hover{
  background: #214a7f;
}

.product-block_backend .button-row{
  width: 100%;
}
.product-block_backend .button-row__list{
  display: flex;
  width: 100%;
}

/* ===================== PRODUCT PAGE ===================== */
.product-block_backend .wrapper--middle{
  max-width: 1320px;
  padding-bottom: clamp(28px, 3vw, 48px);
}
@media (min-width: 992px){
  .product-block_backend .wrapper--middle + .gray-box-full-width{
    margin-top: 60px;
  }
}
.product-block_backend .product{
  display: grid;
  grid-template-columns: minmax(340px, 48%) minmax(420px, 670px);
  align-items: start;
  justify-content: center;
  gap: 72px;
  margin: 34px auto 78px;
}
.product-block_backend .product__gallery{
  width: 100%;
  max-width: none;
  overflow: hidden;
}
.product-block_backend .product__gallery .swiper-slide{
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.product-block_backend .product__gallery .block-link{
  display: block;
  width: min(100%, 520px);
  max-width: 100%;
  margin: 0 auto;
}
.product-block_backend .product__gallery .aspect-ratio{
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.product-block_backend .product__gallery img{
  fill: #ffffff;
}
/* Pagination dots below the gallery (Swiper bundle ships no pagination CSS) */
.product-block_backend .product__gallery .swiper-pagination{
  position: static;
  display: flex;
  justify-content: center;
  width: auto !important;
  margin-top: 18px;
}
.product-block_backend .product__gallery .swiper-pagination-bullet{
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 0 6px !important;
  background: #c5d0e0;
  opacity: 1;
  border-radius: 50%;
  cursor: pointer;
  left: auto !important;       /* cancel dynamicBullets inline offset */
  transform: none !important;  /* cancel dynamicBullets scaling */
  transition: background 200ms ease;
}
.product-block_backend .product__gallery .swiper-pagination-bullet-active{
  background: var(--primary);
}
.product-block_backend .product__gallery .swiper-pagination-bullet:only-child{
  display: none;
}
.product-block_backend .product__gallery-video{
  margin-bottom: 18px;
}
.product-block_backend .product__info{
  max-width: 670px;
  padding-top: 0;
}
.product-block_backend .product__info-nav{
  display: none;
}
.product-block_backend .product-card__labels{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}
.product-block_backend .product-card__label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.product-block_backend .product-card__label--discount,
.product-block_backend .product-card__label--discount1,
.product-block_backend .product-card__label--promo,
.product-block_backend .product-card__label--special-price{
  background: #df5d67;
}
.product-block_backend .product-card__label--discount{
  background: #ff0000;
}
.product-block_backend .product-card__label--best-selling,
.product-block_backend .product-card__label--best-seller,
.product-block_backend .product-card__label--hit,
.product-block_backend .product-card__label--gift{
  background: #f4b26f;
}
.product-block_backend .product-card__label--new{
  background: #8fbd86;
}
.product-block_backend .product__info-availability{
  margin: 0 0 18px;
}
.product-block_backend .product__info-availability-item{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #606060;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 500;
}
.product-block_backend .product__info-availability-icon-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8fbd86;
}
.product-block_backend .product__info-availability-icon-check svg{
  width: 14px;
  height: 14px;
  color: #fff;
  fill: currentColor;
}
.product-block_backend .product__info-availability-icon-cross{
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.product-block_backend .product__info-availability-icon-cross img{
  display: block;
  width: 22px;
  height: 22px;
}
.product-block_backend .product__info-title{
  margin: 0 0 28px;
  color: #000;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0;
}
.product-block_backend .product__info-second{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin: 0 0 14px;
  padding: 16px 24px;
  border: 0;
  border-radius: 8px;
  background: #f7f7f7;
  color: #555;
  font-size: 15px;
  line-height: 1.4;
}
.product-block_backend .product__info-second-item{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.product-block_backend .product__info-second-item:not(:last-child)::after{
  content: "•";
  margin-left: 13px;
  color: #1f1f1f;
}
.product-block_backend .product__info-second-title{
  color: #000;
  font-weight: 400;
  font-size: 14px;
}

.product-block_backend .product__info-rating{
  display: none;
}
.product-block_backend .product__bda-leaflet-link{
  display: inline-block;
  margin-bottom: 16px;
}
.product-block_backend .product__purchase{
  display: flex;
  align-items: center;
  min-height: 108px;
  margin: 0 0 28px;
  padding: 0 26px 0 26px;
  border-radius: 8px;
  background: #eef2f7;
}
.product-block_backend .product__purchase.product__purchase--notify{
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #edf1f6;
}
.product-block_backend .product__purchase.product__purchase--notify .product__info-price{
  flex: 0 1 auto;
  width: 100%;
  padding-right: 0;
}
.product-block_backend .product__purchase.product__purchase--notify .product__info-price-new{
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
}
.product-block_backend .product__purchase.product__purchase--notify .product__info-btns--notify{
  flex: 0 0 auto;
  width: 100%;
}
.product-block_backend .product__purchase > br{
  display: none;
}
.product-block_backend .product__purchase .product__info-price{
  flex: 0 0 150px;
  display: block;
  margin: 0;
  padding-right: 28px;
}
.product-block_backend .product__purchase .product__info-price-new{
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #09347b;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 400;
}
.product-block_backend .product__purchase--outlet .product__info-price-new{
  color: #ff0000;
}
.product-block_backend .product__purchase .product__prices-sep{
  display: none;
}
.product-block_backend .product__purchase .product__info-price-text{
  margin: 6px 0;
  color: #ff0000;
  font-size: 16px;
  font-weight: 700;
}
.product-block_backend .product__purchase .product__info-price-text .product__prices-sep{
  display: inline;
}
.product-block_backend .product__purchase .product__info-price-old{
  text-decoration: line-through;
}
.product-block_backend > .wrapper > .product > .product__info > .product__info-price-text{
  margin: 10px 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  padding-left: 24px;
}
.product-block_backend > .wrapper > .product > .product__info > .product__info-price-text .product__info-price-old{
  text-decoration: line-through;
}
.product-block_backend .product__info:has(> .product__info-price-text) .product__purchase .product__info-price-new{
  color: #ff0000;
}
.product-block_backend .product__info-longer-shelf{
  width: 100%;
}
.product-block_backend .product__info > .mt-s:has(> .exp-anchor){
  margin-top: 0;
}
.product-block_backend .exp-anchor{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
  min-height: 58px;
  padding: 0 6px;
  border-bottom: 1px solid #eef0f3;
  color: #ff0000;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.product-block_backend .exp-anchor--long{
  border-top: 1px solid #eef0f3;
  border-bottom: 0;
  color: #70a665;
}
.product-block_backend .exp-anchor__icon{
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.product-block_backend .exp-anchor__icon img{
  display: block;
  width: 44px;
  height: 44px;
  filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.28));
}
.product-block_backend .exp-anchor__arrow{
  display: none;
}

/* Outlet expired-products */
.product-block_backend .expired-products{
  margin-bottom: 16px;
  min-width: 0;
  max-width: 100%;
}
/* Case A multiple batches (old-site cards, ported from main.css) */
.product-block_backend .expired-products .title{
  margin: 0 0 16px;
  color: #ff003b;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  text-transform: none;
  letter-spacing: 0;
}
.product-block_backend .expired-products__slider{
  max-width: 100%;
  overflow: hidden;
}
.product-block_backend .expired-products__slider .swiper-wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  height: auto !important;
  width: auto !important;
  transform: none !important;
}
.product-block_backend .expired-products__slider .swiper-slide{
  width: auto !important;
  margin: 0 !important;
  height: auto;
}
.product-block_backend .expired-products__slider .swiper-pagination{
  display: none;
}
.product-block_backend .exp-opt{
  display: flex;
  min-height: 100%;
  position: relative;
}
.product-block_backend .exp-opt__control{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.product-block_backend .exp-opt__label{
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex-grow: 1;
  min-height: 100%;
  padding: 8px 10px;
  border: 1px solid #a0a0a0;
  border-radius: 4px;
  background: #fff;
  outline: 1px solid transparent;
  outline-offset: -2px;
  line-height: normal;
  cursor: pointer;
  transition: 250ms ease;
}
.product-block_backend .exp-opt__control:checked ~ .exp-opt__label{
  border-color: #ff003b;
  outline-color: #ff003b;
  background: #fff9fa;
}
.product-block_backend .exp-opt__date{
  font-size: 14px;
  color: #555;
  font-style: normal;
}
.product-block_backend .exp-opt__prices{
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
/* Case B single batch (one red line per design) */
.product-block_backend .expired-products__single{
  margin: 0;
  color: #ff003b;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.product-block_backend .expired-products__single strong{
  font-weight: 700;
}

/* Gift promotion banner */
.product-block_backend .offer-banner--inline{
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 16px;
  padding: 16px 20px;
  border: 1px solid #d1dde8;
  border-radius: 8px;
  background: #eef2f7;
}
.product-block_backend .offer-banner__aside{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-right: 20px;
  /* border-right: 1px solid #c9d6e8; */
  color: #2E5A99;
}
.product-block_backend .offer-banner__icon{
  width: 30px;
  height: 30px;
  fill: #5072a1;
}
.product-block_backend .offer-banner__label{
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5072a1;
}
.product-block_backend .offer-banner__media{
  flex: 0 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
}
.product-block_backend .offer-banner__media img{
  max-width: 100%;
  max-height: 100%;
  fill: #ffffff;
}
.product-block_backend .offer-banner__body{
  flex: 1 1 auto;
  min-width: 0;
}
.product-block_backend .offer-banner__title{
  margin: 0 0 6px;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.product-block_backend .offer-banner__text{
  margin: 0;
  color: #000;
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 640px){
  .product-block_backend .offer-banner--inline{
    flex-wrap: wrap;
    gap: 14px;
  }
  .product-block_backend .offer-banner__aside{
    padding-right: 14px;
  }
  .product-block_backend .offer-banner__body{
    flex: 1 1 100%;
  }
}

@media (max-width: 767px){
    .product-block_backend .expired-products__single {
      margin-top: 12px;
    }
}

.product-block_backend .product__purchase .product__info-btns{
  flex: 1 1 auto;
  margin: 0;
}
.product-block_backend .product__purchase .product__info-btns-add-basket{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}
.product-block_backend .product__purchase .product__info-btns-counter{
  position: relative;
  flex: 0 0 auto;
  padding: 0 28px;
}
.product-block_backend .product__purchase .product__info-btns-counter::before,
.product-block_backend .product__purchase .product__info-btns-counter::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 58px;
  background: #cccccc;
  transform: translateY(-50%);
}
.product-block_backend .product__purchase .product__info-btns-counter::before{
  left: 0;
}
.product-block_backend .product__purchase--outlet-multi .product__info-btns-counter::before{
  display: none;
}
.product-block_backend .product__purchase .product__info-btns-counter::after{
  right: 0;
}
.product-block_backend .product__purchase .counter-input{
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.product-block_backend .visuallyhidden{
  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;
}
.product-block_backend .product__purchase .counter-input__button{
  position: relative;
  width: 20px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #000;
}
.product-block_backend .product__purchase .counter-input__button::before{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
}
.product-block_backend .product__purchase .counter-input__button--decrease::before{
  content: "-";
}
.product-block_backend .product__purchase .counter-input__button--increase::before{
  content: "+";
}
.product-block_backend .product__purchase .counter-input__element{
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #606161;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 18px;
  line-height: 38px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
  font-weight: 400;
}
.product-block_backend .product__purchase .counter-input__element::-webkit-outer-spin-button,
.product-block_backend .product__purchase .counter-input__element::-webkit-inner-spin-button{
  margin: 0;
  -webkit-appearance: none;
}
.product-block_backend .product__purchase .button-row{
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
}
.product-block_backend .product__purchase .button-row__list{
  width: 100%;
  min-width: 0;
}
.product-block_backend .product__purchase .product__compare-action{
  display: none;
}
.product-block_backend .product__purchase .button.product__info-btns-add{
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 22px 0 26px;
  border: 0;
  border-radius: 999px;
  background: url('/frontend/images-new/icons/add_to_cart_icon.png') center / cover no-repeat;
  box-shadow: 0 5px 12px rgba(13, 75, 143, 0.36);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  max-width: 250px;
  transition: background-color 500ms ease-in-out;
}
.product-block_backend .product__purchase .button.product__info-btns-add::before{
  content: "»";
  margin-right: 5px;
  font-size: 18px;
}
/* .product-block_backend .product__purchase .button.product__info-btns-add:hover{
  background: #0a407d;
} */
.product-block_backend .product__purchase .product__info-btns-add-icon{
  width: 32px;
  height: 32px;
  margin-left: auto;
  color: #fff;
  fill: #fff;
}
.product-block_backend .product__purchase .product__info-btns-add-icon use{
  fill: #fff;
}
.product-block_backend .product__info-contact-btn{
  box-sizing: border-box;
  width: 314px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 314 / 54;
  padding: 0 24px 0 66px;
  border: 0;
  border-radius: 999px;
  background: transparent url("../images-new/notify_me.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 8px 10px rgba(42, 53, 66, .08));
  color: #09347b;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: none;
  transition: transform 200ms ease, filter 200ms ease;
}
.product-block_backend .product__info-contact-btn:hover{
  background: transparent url("../images-new/notify_me.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: none;
  color: #09347b;
  transform: translateY(-4px);
}
.product-block_backend .product__info-btns--notify .button-row__list{
  display: block;
}
.product-block_backend .product__info-btns--notify .product__compare-action{
  display: none;
}

/* Base modal styles required by the existing .js-modal component. */
.modal{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.modal.is-open{
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal *,
.modal::before,
.modal::after{
  box-sizing: inherit;
}
.modal__box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
}
.modal__cont{
  width: 100%;
  padding: 60px 32px 52px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 6px 16px 1px rgba(0, 0, 0, .19);
  transform: translateY(24px);
  transition: transform 250ms ease;
}
.modal.is-open .modal__cont{
  transform: translateY(0);
}
.modal__title{
  margin: 0 0 20px;
}
.modal__sub-text{
  color: #555a60;
  font-size: 16px;
  line-height: 24px;
}
.modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  transition: filter .2s ease;
}
.modal__close .icon{
  display: none;
}
.modal__close::before{
  content: "\00d7";
  color: currentColor;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.modal__close:hover{
  filter: brightness(1.08);
  color: #fff;
}
.modal--s .modal__box{
  max-width: 504px;
}
.modal--m .modal__box{
  max-width: 662px;
}

/* Limit/confirmation modals: favourites limit + checkout shipping info. */
.modal--limit{
  background-color: rgba(9, 52, 123, .32);
  backdrop-filter: blur(4px);
}
.modal--limit .modal__cont{
  padding: 56px 40px 40px;
  border: 1px solid rgba(9, 52, 123, .12);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(9, 52, 123, .22);
}
.modal--limit .modal__title{
  margin: 0;
  color: var(--primary);
  font-size: clamp(var(--fs-20), 3vw, 26px);
  line-height: 1.3;
}
.modal--limit .modal__cont-body{
  margin-top: 18px;
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 1.6;
}
.modal--limit .modal__cont-body .text,
.modal--limit .modal__cont-body p{
  margin: 0;
}
.modal--limit .modal__cont-footer{
  margin-top: 28px;
}
.modal--limit .modal__cont-footer .button-row{
  margin: 0;
}
.modal--limit .modal__cont-footer .button-row__list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.modal--limit .modal__cont-footer .button{
  width: 180px;
  min-width: 180px;
  height: 51px;
  padding: 0 18px;
  background: url('../images-new/button_show_more.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
  box-shadow: none;
}
.modal--limit .modal__cont-footer .button--sub{
  background: url('../images-new/to_cart_bg.png') center / 100% 100% no-repeat;
  color: var(--primary);
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .16));
}
.modal--limit .modal__cont-footer .button:hover{
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}

/* Form modal: shared by profile flows that use the new form system. */
.modal:has(.modal__form){
  background-color: rgba(9, 52, 123, .32);
  backdrop-filter: blur(4px);
}
.modal:has(.modal__form) .modal__cont{
  padding: 56px 40px 40px;
  border: 1px solid rgba(9, 52, 123, .12);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(9, 52, 123, .22);
}
.modal:has(.modal__form) > .modal__box > .modal__cont > .modal__title{
  max-width: 520px;
  margin: 0 auto 28px;
  padding: 0 48px;
  color: var(--primary);
  font-size: clamp(var(--fs-20), 3vw, 28px);
  line-height: 1.25;
}
.modal--form{
  background-color: rgba(9, 52, 123, .32);
  backdrop-filter: blur(4px);
}
.modal--form .modal__cont{
  padding: 56px 40px 40px;
  border: 1px solid rgba(9, 52, 123, .12);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(9, 52, 123, .22);
}
.modal__form-content{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.modal__form-content > .modal__title{
  margin: 0 0 20px;
  color: var(--primary);
  font-size: clamp(var(--fs-20), 3vw, 28px);
  line-height: 1.25;
}
.modal__form-content > .modal__text{
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-14);
  line-height: 1.6;
}
.modal__form-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 30px;
}
.modal__form-actions form{ margin: 0; }
.modal__form-actions .button{
  min-width: 180px;
}
.modal__form{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.modal__form .form-fields{
  display: grid;
  gap: 14px;
}
.modal__form .form__group{ margin: 0; }
.modal__form-check{
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #d1dde8;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: background-color .2s ease, border-color .2s ease;
}
.modal__form-check:has(.form__check-input:checked){
  border-color: rgba(9, 52, 123, .28);
  background: rgba(9, 52, 123, .06);
}
.modal__form-check-label{
  display: block;
  flex: 1 1 auto;
}
.modal__form-link{
  color: var(--primary);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.modal__form-input{
  width: 100%;
  margin-top: 10px;
}
.modal__summary{
  padding: 18px 20px;
  border: 1px solid rgba(9, 52, 123, .12);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.modal__summary-title{
  margin: 0 0 14px;
  color: var(--primary);
  font-size: var(--fs-16);
  line-height: 1.4;
}
.modal__summary-row{
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 1.6;
  text-align: center;
}
.modal__message{
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(237, 28, 36, .2);
  border-radius: var(--radius-sm);
  background: rgba(237, 28, 36, .05);
  text-align: center;
}
.modal__message-text{
  margin: 0;
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.modal__message-link{
  display: inline-block;
  margin-top: 10px;
  color: var(--primary);
  font-size: var(--fs-14);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.modal__form > .button-row,
.modal__form .form-fields > .button-row{
  display: flex;
  justify-content: center;
  margin: 14px 0 0;
}
.modal__form .button-row__list{
  display: flex;
  justify-content: center;
}
.modal__form .button,
.modal--form .modal__form-submit{
  min-width: 260px;
  padding: 0 8px;
  white-space: nowrap;
  background: url('../images-new/icons/add_comment.png') center / 100% 100% no-repeat;
  /* 9-slice the pill: 26px caps keep their round shape, only the middle
     stretches — so the graphic no longer distorts at min-width:260px.
     padding trimmed + nowrap so the label still fits on one line. */
  border: 0 solid transparent;
  border-width: 0 26px;
  border-image: url('../images-new/icons/add_comment.png') 0 26 fill / 0 26px stretch;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
  box-shadow: none;
}
.modal__form .button:hover,
.modal--form .modal__form-submit:hover{
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}
.modal--form .modal__form-actions .button{
  width: 240px;
  min-width: 240px;
  height: 51px;
  padding: 0 18px;
}
.modal--form .modal__form-actions .modal__form-submit{
  background: url('../images-new/button_show_more.png') center / 100% 100% no-repeat;
  border: 0 solid transparent;
  border-width: 0 26px;
  border-image: url('../images-new/button_show_more.png') 0 26 fill / 0 26px stretch;
}
.modal--form .modal__form-actions .button--sub{
  background: url('../images-new/to_cart_bg.png') center / 100% 100% no-repeat;
  border: 0 solid transparent;
  border-width: 0 26px;
  border-image: url('../images-new/to_cart_bg.png') 0 26 fill / 0 26px stretch;
  color: var(--primary);
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .16));
  box-shadow: none;
}
.modal--form .modal__form-actions .button--sub:hover{
  filter: brightness(1.03) drop-shadow(0 8px 16px rgba(12, 55, 113, .22));
}

@media (max-width: 640px){
  .modal__box{
    width: calc(100% - 32px);
  }
  .modal__cont{
    padding: 56px 20px 32px;
  }
  .modal:has(.modal__form) .modal__cont{
    padding: 56px 18px 28px;
  }
  .modal--form .modal__cont{
    padding: 56px 18px 28px;
  }
  .modal--limit .modal__cont{
    padding: 56px 18px 28px;
  }
  .modal--limit .modal__cont-footer .button-row__list{
    flex-direction: column;
  }
  .modal--limit .modal__cont-footer .button{
    width: 100%;
    min-width: 0;
    max-width: 240px;
  }
  .modal:has(.modal__form) > .modal__box > .modal__cont > .modal__title{
    margin-bottom: 22px;
    padding: 0 32px;
  }
  .modal__form-check{ padding: 12px; }
  .modal__summary{ padding: 16px 14px; }
  .modal__form .button{
    width: 100%;
    min-width: 0;
  }
  .modal__form-actions{
    flex-direction: column;
    gap: 12px;
  }
  .modal__form-actions,
  .modal__form-actions form,
  .modal--form .modal__form-actions .button{
    width: 100%;
  }
  .modal--form .modal__form-actions .button{ min-width: 0; }
}

.product-block_backend .product__info-second-title-box,
.product-block_backend .product__info-favorite,
.product-block_backend .product__info-share{
  width: 100%;
  margin: 0;
}

.product-block_backend .product__info-second-title-box,
.product-block_backend .product__info-favorite{
  border-bottom: 1px solid #eef0f3;
}

/* "Препоръчвано от дерматолози" label (.labels-list). Ported from the old
   main.css — new styles.css left it unstyled, so the 42×42 picture stretched to
   full column width. Keep it where it renders (after the favorite row) with an
   even top gap from the element above. */
.product-block_backend .labels-list{
  width: 100%;
  margin-top: 0;
}
.product-block_backend .label-recommended-by-d{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 6px;
  border-bottom: 1px solid #eef0f3;
  color: currentColor;
  text-decoration: none;
}
.product-block_backend .label-recommended-by-d picture{
  flex: 0 0 44px;
  max-width: 44px;
  width: 100%;
}
.product-block_backend .label-recommended-by-d strong{
  color: #232323;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}


.product-block_backend .product__info-second-title-box > a,
.product-block_backend .product__info-favorite,
.product-block_backend .product__info-share-link{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-height: 58px;
  padding: 0 6px;
  color: #222;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  text-decoration: none;
}
.product-block_backend .product__info-second-title-box > a{
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.product-block_backend .product__info-second-title-box > a.button.product__info-btns-add.product__info-btns--reserved{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
  min-height: 58px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #222;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
}
.product-block_backend .product__info-second-title-box > a.button.product__info-btns-add.product__info-btns--reserved:hover{
  background: transparent;
  color: #222;
}
.product-block_backend .product__info-second-title-box br{
  display: none;
}
.product-block_backend .product__info-second-title-box .user-nav__link-icon,
.product-block_backend .product__info-share-icon,
.product-block_backend .product__action-icon{
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: url('/frontend/images-new/icons/icons_bg.png') center / cover no-repeat;
  filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.28));
  color: #fff;
}
.product-block_backend .product__info-second-title-box > a:hover .user-nav__link-icon,
.product-block_backend .product__info-share-link:hover .product__info-share-icon,
.product-block_backend .product__action-icon:hover{
  filter: none;
}
.product-block_backend .product__action-icon .icon,
.product-block_backend .product__info-share-icon .icon{
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.product-block_backend .product__info-second-title-box .user-nav__link-icon{
  padding: 10px;
}
.product-block_backend .product__info-favorite .product-card__button-icon{
  color: #fff;
  fill: currentColor;
}
.product-block_backend .product__info-favorite .favorite-button.is-active{
  background: url('/frontend/images-new/icons/icons_bg.png') center / cover no-repeat;
}
.product-block_backend .product__info-share-text,
.product-block_backend .product__info-favorite-text{
  margin: 0;
  color: #222;
}
.product-block_backend .product__info-favorite-text{
  cursor: pointer;
}

/* Share popup (social networks) */
.product-block_backend .product__info-share{
  position: relative;
}
.product-block_backend .product__info-share-modal{
  position: absolute;
  z-index: 5;
  left: 55px;
  top: -20px;
  padding: 30px 35px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.07);
}
.product-block_backend .product__info-share-modal.hidden{
  display: none;
}
.product-block_backend .product__info-share-modal:after{
  z-index: 1;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  top: 35px;
  left: 0;
  box-sizing: border-box;
  border: 5px solid #fff;
  border-color: transparent transparent #fff #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);
  box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.07);
}
.product-block_backend .product__info-share-modal .modal-close-btn{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  background: 0 0;
  color: currentColor;
  cursor: pointer;
  transform: rotate(45deg);
}
.product-block_backend .product__info-share-modal .modal-close-btn .icon{
  width: 100%;
  height: 100%;
}
.product-block_backend .product__info-share-social{
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  text-decoration: none;
}
.product-block_backend .product__info-share-social:last-child{
  margin-bottom: 0;
}
.product-block_backend .product__info-share-social-icon{
  width: 17px;
  height: 17px;
}
.product-block_backend .product__info-share-social-text{
  margin: 0 0 0 10px;
  color: #232323;
  font-size: 12px;
  font-weight: 500;
}

@media (min-width: 1200px){
  .product-block_backend .product__purchase:not(.product__purchase--notify) .product__info-price-new{
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 1199px){
  .product-block_backend .product{
    grid-template-columns: minmax(300px, 45%) minmax(390px, 1fr);
    gap: 44px;
  }
  .product-block_backend .product__purchase{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px 22px;
  }
  /* hide the vertical divider lines around the counter below 1200px */
  .product-block_backend .product__purchase .product__info-btns-counter::before,
  .product-block_backend .product__purchase .product__info-btns-counter::after{
    display: none;
  }
  .product-block_backend .product__purchase .product__info-price{
    flex-basis: auto;
    padding: 0;
  }
  .product-block_backend .product__purchase .product__info-price-new{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .product-block_backend .product__purchase .product__info-btns-add-basket{
    display: grid;
    grid-template-columns: minmax(150px, auto) minmax(190px, 1fr);
    gap: 18px;
  }
  .product-block_backend .product__purchase .product__info-btns-counter{
    padding-left: 0;
  }
}
@media (min-width: 769px) and (max-width: 991px){
  .product-block_backend .product__purchase:not(.product__purchase--notify){
    flex-direction: row;
    align-items: center;
  }
  .product-block_backend .product__purchase:not(.product__purchase--notify) .product__info-price{
    flex: 0 0 auto;
    padding-right: 24px;
  }
  .product-block_backend .product__purchase:not(.product__purchase--notify) .product__info-btns{
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (max-width: 991px){
  .product-block_backend .product{
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 32px;
  }
  .product-block_backend .product__info{
    max-width: none;
  }
  .product-block_backend .product__info-nav{
    display: none;
  }
}
@media (max-width: 640px){
  .product-block_backend .product-card__label{
    min-height: 36px;
    padding: 0 16px;
    font-size: 12px;
  }
  .product-block_backend .product__info-title{
    font-size: 24px;
  }
  .product-block_backend .product__info-second{
    padding: 14px 16px;
  }
  .product-block_backend .product__purchase{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px;
  }
  .product-block_backend .product__purchase .product__info-price{
    flex-basis: auto;
    padding: 0;
  }
  .product-block_backend .product__purchase .product__info-price-new{
    flex-direction: column;
    font-size: 26px;
  }
  .product-block_backend .product__purchase .product__info-btns-add-basket{
    flex-direction: column;
    display: flex;
    align-items: stretch;
    gap: 16px;
  }
  .product-block_backend .product__purchase .product__info-btns-counter{
    align-self: center;
    padding: 0;
  }
  .product-block_backend .product__purchase .button.product__info-btns-add{
    min-width: 0;
  }
  .product-block_backend .product__info-second-title-box > a,
  .product-block_backend .product__info-favorite,
  .product-block_backend .product__info-share-link{
    font-size: 16px;
  }
}

/* ===================== RELATED PRODUCTS ===================== */
/* Decorative arrow divider between comment form and related slider */
.section-arrow-divider{
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.section-arrow-divider img {
    margin-top: -105px;
}

.related-products{
  margin: 0;
  padding: 54px 0 72px;
  overflow: hidden;
  background: #fff;
}

.related-products__wrapper{
  max-width: 1260px;
}

.related-products .title{
  margin: 0 0 38px;
  color: #ff0000;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.related-products__slider{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.related-products__viewport{
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 4px 18px;
  overflow: hidden;
  z-index: 3;
}

.related-products__slide{
  display: flex;
  height: auto;
  padding: 0 18px; /* 18px + 18px = 36px gap between cards (desktop) */
}

.related-products__slide .product-list__item{
  display: flex;
  width: 100%;
}

.related-products__slide .product-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 450px;
  padding: 16px 14px 22px;
  background: #fff;
  border: 1px solid #e8e0d8;
  border-radius: 20px;
  box-shadow: 0 8px 10px rgba(42, 53, 66, .08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.related-products__slide .product-card:hover{
  transform: translateY(-4px);
  box-shadow: none;
}

.slider--product .swiper-slide,
.card-carousel .swiper-slide{
  display: flex;
  height: auto;
}

.slider--product .swiper-slide .product-list__item,
.card-carousel .swiper-slide .product-list__item{
  display: flex;
  width: 100%;
}

.slider--product .swiper-slide .product-card,
.card-carousel .swiper-slide .product-card{
  flex: 1 1 auto;
  width: 100%;
}

.related-products .product-card__button{
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.related-products .product-card__button--favorites{
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  width: 22px;
  height: 22px;
  color: #e9e1d5;
}

.related-products .product-card__button--favorites.is-active{
  color: #ff0000;
}

.related-products .product-card__button-icon{
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.related-products .product-card__button-icon-fill{
  display: none;
}

.related-products .product-card__button--favorites.is-active .product-card__button-icon-outline{
  display: none;
}

.related-products .product-card__button--favorites.is-active .product-card__button-icon-fill{
  display: block;
}

.related-products .label-recommended-by-d{
  display: none;
}

.related-products .product-card__labels{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  gap: 5px;
}

.related-products .product-card__label{
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 0;
  height: 28px;
  padding: 10px;
  border-radius: 999px;
  background: #7fbd81;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.related-products .product-card__label--new{
  background: #91bd88;
}
.related-products .product-card__label--discount,
.related-products .product-card__label--promo,
.related-products .product-card__label--special-price{
  background: #f0212d;
}
.related-products__slider .product-card__label--discount1{
  background: #df5d67;
}
.related-products .product-card__label--best-selling,
.related-products .product-card__label--best-seller,
.related-products .product-card__label--hit{
  background: #f6b86f;
}
.related-products .product-card__label--gift{
  background: #5072a1;
}

.related-products__slide .product-card__preview{
  order: 1;
  width: 100%;
  max-width: 200px;
  height: 200px;
  margin: 56px auto 12px;
  background: transparent;
}

.related-products__slide .product-card__preview a{
  display: block;
  width: 100%;
  height: 100%;
}

.related-products__slide .product-card__preview img{
  width: 100%;
  height: 100%;
  fill: #ffffff;
}

.related-products__slide .product-card__text{
  order: 3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 48px;
  margin: 0 0 4px;
  text-align: center;
}

.related-products__slide .product-card__text-link{
  color: #000;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
}

.related-products .product-card__old-price{
  order: 4;
  min-height: 17px;
  margin: 0;
  color: #09347b;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: line-through;
}

.related-products .product-card__prices{
  order: 5;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: #16478b;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}

.related-products .product-card__price{
  color: inherit;
  font: inherit;
}

.related-products__slide .product-card__delayed-delivery{
  order: 2;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: #ff0000;
  text-align: center;
}

/* Not-sellable price text ("Очаква доставка") is a direct flex child with no
   explicit order → defaults to 0 and jumps above the image. Place it between
   the image (order 1) and the title (order 3). */
.related-products__slide .product-card > .product-card__price{
  order: 2;
  margin: 0 0 4px;
  text-align: center;
}

.related-products .product-card__prices-title{
  display: none;
}

.related-products .product-card__prices.product-card__prices--old{
  color: #09347b;
  font-size: 13px;
  text-decoration: line-through;
}

.related-products .product-card > br,
.related-products .product-card__buttons{
  display: none;
}

.related-products__nav{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 64px;
  padding: 0;
  color: #d9dde2;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 150ms ease;
}

.related-products__nav-icon{
  display: block;
  width: 32px;
  height: 37px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 37'%3E%3Cpath d='M16 3 L3 18.5 L16 34 M31 3 L18 18.5 L31 34' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 37'%3E%3Cpath d='M16 3 L3 18.5 L16 34 M31 3 L18 18.5 L31 34' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.related-products__nav--next .related-products__nav-icon{
  transform: rotate(180deg);
}

.related-products__nav:not(.swiper-button-disabled):hover{
  color: #015394;
}

.related-products__nav.swiper-button-disabled{
  color: #d9dde2;
  cursor: default;
}

.related-products__pagination{
  display: none;
}

@media (max-width: 1199px){
  .related-products__nav{
    display: none;
  }
}

@media (max-width: 1024px){
  .related-products{
    padding: 46px 0 58px;
  }

  .related-products__slide{
    padding-inline: 8px;
  }
}

@media (max-width: 767px){
  .related-products{
    padding: 38px 0 46px;
  }

  .related-products .title{
    margin-bottom: 26px;
    font-size: 22px;
  }

  .related-products__slider{
    padding: 0;
    flex-wrap: wrap;
  }

  .related-products__viewport{
    margin: 0;
    padding: 4px 0 18px;
  }

  .related-products--promo .related-products__viewport {
    padding-bottom: 10px;
  }



  .related-products__slide{
    padding-inline: 6px;
  }

  .related-products__slide .product-card{
    min-height: 340px;
  }

  .related-products__nav{
    display: none;
  }

  .related-products__pagination{
    position: static;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 7px;
    margin-top: 18px;
    flex-basis: 100%;
  }

  /* Figma pagination (node 147:135) — reuses the banner bullet look: 40x4px pills,
     inactive #e4ebf2 / active --primary. dynamicBullets transforms are cancelled so
     the bars stay uniform. */
  .related-products__pagination.swiper-pagination-bullets-dynamic{
    overflow: visible;
  }
  .related-products__pagination .swiper-pagination-bullet{
    width: 40px;
    height: 4px;
    margin: 0 3.5px;
    background: #e4ebf2;
    opacity: 1;
    border-radius: 20px;
    left: auto !important;       /* cancel dynamicBullets inline offset */
    transform: none !important;  /* cancel dynamicBullets scaling */
    transition: background 200ms ease;
  }
  .related-products__pagination .swiper-pagination-bullet-active{
    background: var(--primary);
  }

  /* Homepage promo slider only (NOT the cart free-delivery slider, which also
     carries .related--products-new-products): inactive bullets are white so they
     stay visible on the darker promo background. Active bullet keeps --primary. */
  .related-products--promo:not(.related--products-new-products) .related-products__pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){
    background: #fff;
  }

  /* Homepage: only the promo slider directly above the brochure band gets a
     bottom gap so its pagination doesn't crowd the brochures. Other sliders
     (cart / actual / new-products) are not followed by a band, so untouched. */
  .related-products:has(+ .promo-brochure-band) .related-products__pagination{
    margin-bottom: 33px;
  }
}

@media (max-width: 575.98px){
  .related-products .product-card__labels{
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 55px);
  }
  .related-products .product-card__label{
    height: auto;
    min-height: 18px;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.2;
  }
}

/* ===================== HOMEPAGE PROMO PRODUCTS (.related-products--promo) ===================== */
.related-products--promo .product-card__prices{
  color: #ff0000;
  font-weight: 400;
  font-size: 24px;
}

/* Homepage non-promo sliders (Актуално, Нови продукти). They also carry
   .related-products--promo from _chosen.htm, so override its red price here
   (later source order wins) using their unique section classes. */
.related-products--actual .product-card__prices,
.related--products-new-products .product-card__prices{
  color: #09347b;
  font-weight: 400;
  font-size: 24px;
}
/* If a product on these sliders is itself on promotion, its current price gets
   .product-card__prices--discounted (from the price helper) — show it red.
   The strikethrough old price (.product-card__prices--old) stays #09347b. */
.related-products--actual .product-card__prices--discounted,
.related--products-new-products .product-card__prices--discounted{
  color: #ff0000;
}
@media (max-width: 575.98px){
  /* Мобилно: стандартна цена 18px и за трите начални слайдъра
     (Промоция / Актуално / Нови). Зачертаната стара цена остава 13px. */
  .related-products--promo .product-card__prices,
  .related-products--actual .product-card__prices,
  .related--products-new-products .product-card__prices{
    font-size: 18px;
  }
}
.related-products--promo .product-card__buttons{
  order: 6;
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.related-products--promo .product-card__button--compare{
  display: none;
}
.related-products--promo .product-card__button--cart{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: var(--primary);
  border-radius: 50%;
  transition: background 150ms ease;
}
.related-products--promo .product-card__button--cart:hover{
  background: #16478b;
}
.related-products--promo .product-card__button--cart .product-card__button-icon{
  width: 20px;
  height: 20px;
  fill: #fff;
}


/* Section background: a decorative downward-notch image pinned to the top edge.
 The PNG (1919x114) is TRANSPARENT above its curve so the white section above
 shows through, and solid #edf1f6 below the curve. A flat background-color would
 fill behind that transparent top and hide the notch, so instead we layer a
 #edf1f6 fill that starts BELOW the image: the notch height at full width is
 114/1919 5.94vw, so the fill = 100% tall minus that, anchored to the bottom.
 The image's bottom row is #edf1f6, so the two layers meet with no seam. */
.related-products--promo{
  background-image:
    url('/frontend/images-new/subra_home_promo_bg.png'),
    linear-gradient(#edf1f6, #edf1f6);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% calc(100% - 5.94vw);
  overflow: visible;
}
/* Plain " " only: its top notch + circle/arrow are baked into the
 background image (no separate divider), so push the title below the notch.
 The notch is 5.94vw tall, so clear it proportionally. The :not() guards keep
 the themed / (which share --promo) untouched. */
.related-products--promo:not(.related-products--actual):not(.related--products-new-products){
  padding-top: 6.5vw;
}

/* Mobile: swap the wide desktop notch art for a dedicated mobile band (bg_01.png,
   412x50, downward V) plus a separate red chevron, so each is positioned
   independently — the chevron no longer stretches with the band. Only the plain
   "Промоции" section — the themed Актуално/Нови dividers are untouched. */
@media (max-width: 767px){
  .section.related-products.related-products--promo:not(.related-products--actual):not(.related--products-new-products){
    background-image:
      url('/frontend/images-new/bg_01.png'),
      linear-gradient(#e4ebf2, #e4ebf2);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: 100% auto, 100% calc(100% - 12.14vw);
    position: relative;
    padding-top: clamp(58px, 15vw, 96px);
  }
  .section.related-products.related-products--promo:not(.related-products--actual):not(.related--products-new-products)::before{
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 1;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #e4ebf2;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .section.related-products.related-products--promo:not(.related-products--actual):not(.related--products-new-products)::after{
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 2;
    width: 21px;
    height: 26px;
    background: url('/frontend/images-new/arrow_red.png') center / contain no-repeat;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .section.related-products.related-products--promo:not(.related-products--actual):not(.related--products-new-products) .related-products__wrapper{
    position: relative;
    z-index: 3;
  }
}
@media (min-width: 600px) and (max-width: 767px){
  .section.related-products.related-products--promo:not(.related-products--actual):not(.related--products-new-products)::before{
    top: 4px;
  }
  .section.related-products.related-products--promo:not(.related-products--actual):not(.related--products-new-products)::after{
    top: 26px;
  }
}

.related-products--promo .related-products__wrapper{
  max-width: var(--container);
}

.related-products--promo .related-products__slide{
  display: flex;
}

.related-products--promo .related-products__slide .product-card{
  flex: 1 1 auto;
  padding-bottom: 28px;
}

/* Align the cart button on one line across all promo cards: push the whole
   bottom group (old-price + price + button) down via the title's auto margin,
   so the last element (button) sits 28px from the card bottom in every card. */
.related-products--promo .related-products__slide .product-card__text{
  margin-bottom: auto;
}

/* Nav arrows sit outside the cards, in the section margins (Figma node 10:147/148):
   large thin double-chevrons, active = primary blue, disabled = grey. */
.related-products--promo .related-products__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  color: var(--primary);
  z-index: 2;
}
.related-products--promo .related-products__nav--prev{ left: -64px; }
.related-products--promo .related-products__nav--next{ right: -64px; }
.related-products--promo .related-products__nav:not(.swiper-button-disabled):hover{ color: #16478b; }
.related-products--promo .related-products__nav.swiper-button-disabled{ color: #b7b7b7; }
.related-products--promo .related-products__nav-icon{ width: 36px; height: 42px; }

@media (min-width: 1200px) and (max-width: 1700px){
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__slider{
    padding-left: 54px;
    padding-right: 54px;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    color: var(--primary);
    /* background: rgba(255,255,255,.7); */
    border-radius: 50%;
    z-index: 2;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__nav--prev{
    left: 6px;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__nav--next{
    right: 6px;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__nav-icon{
    width: 22px;
    height: 26px;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__nav.swiper-button-disabled{
    color: #b7b7b7;
  }
}

@media (min-width: 641px) and (max-width: 1199px){
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__slider{
    flex-wrap: wrap;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__pagination{
    position: static;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 7px;
    flex-basis: 100%;
    margin-top: 24px;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__pagination.swiper-pagination-bullets-dynamic{
    overflow: visible;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__pagination .swiper-pagination-bullet{
    width: 40px;
    height: 4px;
    margin: 0 3.5px;
    background: #e4ebf2;
    opacity: 1;
    border-radius: 20px;
    left: auto !important;
    transform: none !important;
    transition: background 200ms ease;
  }
  .related-products:is(.related-products--promo, .related-products--actual, .related--products-new-products) .related-products__pagination .swiper-pagination-bullet-active{
    background: var(--primary);
  }
}

/* ===================== HOMEPAGE PROMO BROCHURE BAND ===================== */
.promo-brochure-band{
  position: relative;
  z-index: 2;
  height: 230px;
  margin-top: 0px;
  background: #e4ebf2;
}
.promo-brochure-band__inner{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 150px;
  gap: 28px;
  padding-right: 10%;
}
.promo-brochure-band__media{
  display: block;
  width: 330px;
  max-width: 45%;
}
.promo-brochure-band__media img{
  width: 100%;
  height: auto;
  /* margin-top: -100px; */
}
.promo-brochure-band__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: -10px;
}
.promo-brochure-band__title{
  color: #ff383c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
.promo-brochure-band__link{
  color: #09347b;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 767.98px){
  .promo-brochure-band{
    height: auto;
    margin-top: 0;
    padding: 0px 0 50px 0;
  }
  .promo-brochure-band__inner{
    flex-direction: column;
    justify-content: center;
    height: auto;
    gap: 14px;
    padding-right: 0;
    text-align: center;
  }
  .promo-brochure-band__media{
    max-width: 260px;
  }
  .promo-brochure-band__media img{
    margin-top: 0;
  }
  .promo-brochure-band__content{
    align-items: center;
    margin-top: 0;
  }
}

/* ===================== PRODUCT GIFT DROPDOWN =====================
   Without these rules the gift dropdown renders unstyled (always visible) and overlaps the
   card. The dropdown opens via the JS-toggled `.open` class on `.product-gift`. */
.product-gift{
  width: 68px;
  position: relative;
  color: rgba(35,35,35,.7);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  text-transform: none;
  z-index: 3;
}
.product-gift__button{
  height: 43px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.product-gift__button-icon{ flex-shrink: 0; height: 24px; width: 24px; }
.product-gift__button-arrow{ flex-shrink: 0; height: 12px; width: 12px; transition: transform 250ms ease; }
.product-gift__dropdown{
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 224px;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 28px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 1px 6px 16px 0 rgba(0,0,0,.15);
  transform: translateY(-8px);
  transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease;
}
.product-gift.open .product-gift__button-arrow{ transform: rotate(180deg); }
.product-gift.open .product-gift__dropdown{ opacity: 1; visibility: visible; transform: translateY(0); }
.product-gift__preview{ width: 100%; max-width: 134px; margin-bottom: 12px; }
.product-gift__title{ margin-bottom: 10px; color: #ff7f04; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.product-gift__text{ margin: 0; }

/* ===================== PRODUCT COMMENTS ===================== */
.product-block_backend .product-comments-wrapper{
  max-width: 100%;
  padding: 0 max(24px, calc((100% - 1200px) / 2)) 60px;
  background: #edf1f6;
}

.product-block_backend #product_comments{
  padding: 34px 0 64px;
}

.product-block_backend #product_comments .el-hide{
  display: none;
}

.product-block_backend #product_comments .product-comments__toggle{
  display: none;
}

.product-block_backend #product_comments .product-comments__form-wrap{
  display: block;
}

.product-block_backend #product_comments .pt-m.center{
  text-align: center;
}

.product-block_backend #product_comments .pt-m.center > .button{
  min-height: 42px;
  padding: 10px 28px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(180deg, #3974b4 0%, #073b82 100%);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 5px 10px rgba(12, 55, 113, .22);
}

.product-block_backend .product-comments__add-comment{
  margin: 0;
  padding: 0;
  border: 0;
}

.product-block_backend .product-comments__title{
  width: min(100%, 970px);
  margin: 50px auto 30px ;
  color: #09347b;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
}

.product-block_backend .product-comments__form-card{
  width: min(100%, 970px);
  margin: 0 auto;
  padding: 38px 40px 36px;
  background: #fff;
  border-radius: 8px;
}

.product-block_backend .product-comments__add-comment-controls-grid{
  display: grid;
  grid-template-columns: minmax(240px, 400px) 220px 180px 1fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 18px;
}

.product-block_backend .product-comments__add-comment-controls-grid > div:first-child{
  order: 1;
}

.product-block_backend .product-comments__add-comment-controls-grid > div:nth-child(2){
  order: 3;
  align-self: end;
  padding-bottom: 9px;
}

.product-block_backend .product-comments__add-comment-controls-grid > div:nth-child(3){
  order: 2;
  align-self: end;
}

.product-block_backend .product-comments__form-card .form__group,
.product-block_backend .product-comments__form-card .form-group{
  margin: 0;
}

.product-block_backend .product-comments__form-card .form__label{
  display: block;
  margin: 0 0 7px;
  font-weight: 400;
  color: #000;
  font-size: 14px;
  line-height: 1.2;
}

.product-block_backend .product-comments__form-card .form__required{
  color: inherit;
  font-size: inherit;
}

.product-block_backend .product-comments__form-card .form__control{
  display: block;
  width: 100%;
  height: 50px;
  padding: 8px 12px;
  color: #232323;
  font: inherit;
  background: #f8f8f8;
  border: 1px solid #b7b7b7;
  border-radius: 8px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.product-block_backend .product-comments__form-card .form__control:focus{
  border-color: #16478b;
  box-shadow: 0 0 0 3px rgba(22, 71, 139, .12);
}

.product-block_backend .product-comments__form-card .form__control--textarea{
  min-height: 114px;
  height: 114px;
  resize: vertical;
}

.product-block_backend .product-comments__form-card .form__check{
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.product-block_backend .product-comments__form-card .form__check-input{
  width: 24px;
  height: 24px;
  margin: 0 0 7px;
  flex: 0 0 24px;
  accent-color: #16478b;
}

.product-block_backend .product-comments__form-card .form__check-label{
  color: #000;
  font-size: 14px;
  line-height: 1.35;
}

.product-block_backend .stars{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.product-block_backend .stars__cont{
  position: relative;
  width: 100px;
  height: 20px;
}

.product-block_backend .stars__bg,
.product-block_backend .stars__fg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../images/star-grey.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 20px 20px;
}

.product-block_backend .stars__fg{
  width: 0;
  background-image: url("../images/star.svg");
}

.product-block_backend .stars input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-block_backend .stars label{
  position: absolute;
  top: 0;
  z-index: 2;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.product-block_backend .stars label:nth-of-type(1){ left: 0; }
.product-block_backend .stars label:nth-of-type(2){ left: 20px; }
.product-block_backend .stars label:nth-of-type(3){ left: 40px; }
.product-block_backend .stars label:nth-of-type(4){ left: 60px; }
.product-block_backend .stars label:nth-of-type(5){ left: 80px; }

/* Yellow fill driven by the checked radio (fg is a later sibling of all inputs) */
.product-block_backend .stars__fg{
  transition: width .12s ease;
}
.product-block_backend .stars input:nth-of-type(1):checked ~ .stars__fg{ width: 20px; }
.product-block_backend .stars input:nth-of-type(2):checked ~ .stars__fg{ width: 40px; }
.product-block_backend .stars input:nth-of-type(3):checked ~ .stars__fg{ width: 60px; }
.product-block_backend .stars input:nth-of-type(4):checked ~ .stars__fg{ width: 80px; }
.product-block_backend .stars input:nth-of-type(5):checked ~ .stars__fg{ width: 100px; }

/* Hover preview overrides the checked state while pointing */
.product-block_backend .stars label:nth-of-type(1):hover ~ .stars__fg{ width: 20px; }
.product-block_backend .stars label:nth-of-type(2):hover ~ .stars__fg{ width: 40px; }
.product-block_backend .stars label:nth-of-type(3):hover ~ .stars__fg{ width: 60px; }
.product-block_backend .stars label:nth-of-type(4):hover ~ .stars__fg{ width: 80px; }
.product-block_backend .stars label:nth-of-type(5):hover ~ .stars__fg{ width: 100px; }

.product-block_backend .stars__num{
  min-width: 20px;
  color: #555;
  font-size: 12px;
  line-height: 1;
}

.product-block_backend .product-comments__add-comment-cta{
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.product-block_backend .product-comments__add-comment-cta .button{
  width: auto;
  min-width: 120px;
  height: 50px;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 700;
  border: 0;
  border-radius: 22px;
}

.product-block_backend .product-comments__add-comment-cta .button--sub{
  color: #555;
  background: #edf1f6;
  box-shadow: 0 3px 8px rgba(22, 35, 50, .12);
}

.product-block_backend .product-comments__add-comment-cta .button--l{
  color: #fff;
  background: url('../images-new/icons/add_comment.png') center / 100% 100% no-repeat;
  box-shadow: 0 5px 10px rgba(12, 55, 113, .22);
}

/* --- Comment list items (AJAX-rendered into #product_old_comments) --- */
.product-block_backend #product_old_comments{
  width: min(100%, 970px);
  margin: 0 auto;
}

.product-block_backend .product-comment{
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.product-block_backend .product-comment:first-of-type{
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

.product-block_backend .product-comment__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.product-block_backend .product-comment__rating{
  flex-shrink: 0;
}

.product-block_backend .product-comment__text{
  flex: 1;
  text-align: center;
}

.product-block_backend .product-comment__text .text{
  font-size: var(--fs-14);
}

.product-block_backend .product-comment__text .text p{
  margin: 0;
  color: var(--text);
  font-weight: 400;
  line-height: 1.6;
}

.product-block_backend .product-comment__date{
  flex-shrink: 0;
  text-align: right;
}

.product-block_backend .product-comment__date-text{
  color: var(--muted);
  font-size: var(--fs-12);
}

.product-block_backend .product-comment__bottom{
  text-align: center;
}

.product-block_backend .product-comment__text-accent{
  margin: 0 0 6px;
  color: var(--success);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.5;
}

.product-block_backend .product-comment__text-grey{
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-12);
}

.product-block_backend .second-nav{
  display: none;
}

@media (max-width: 768px){
  .product-block_backend .product-comments-wrapper{
    padding-inline: 16px;
  }

  .product-block_backend .product-comment__bottom, #products-suggestion-free-delivery{
    margin-bottom: 12px;
  }

  .product-block_backend #product_comments{
    padding: 28px 0 44px;
  }

  .product-block_backend .product-comments__title{
    margin-bottom: 20px;
    font-size: 24px;
  }

  .product-block_backend .product-comments__form-card{
    padding: 28px 22px;
  }

  .product-block_backend .product-comments__add-comment-controls-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-block_backend .product-comments__add-comment-controls-grid > div{
    order: initial !important;
    width: 100%;
  }

  .product-block_backend .product-comments__add-comment-controls-grid > div:nth-child(2){
    order: 3 !important;
  }

  .product-block_backend .product-comments__add-comment-controls-grid > div:nth-child(3){
    order: 2 !important;
  }

  .product-block_backend .product-comments__form-card .form__check{
    align-items: flex-start;
  }

  .product-block_backend .product-comment__top{
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .product-block_backend .product-comment__text{
    order: 1;
    flex-basis: 100%;
  }

  .product-block_backend .product-comment__date{
    text-align: center;
  }

  /* Keep the review pagination clear of the "Добави коментар" button on mobile */
  .product-block_backend #product_old_comments .pagination{
    margin-bottom: 32px;
  }
}

@media (max-width: 480px){
  .product-block_backend .product-comments__add-comment-cta{
    flex-direction: column-reverse;
  }

  .product-block_backend .product-comments__add-comment-cta .button{
    width: 100%;
  }

  /* The add_comment.png pill distorts when stretched full-width on mobile;
     swap it for the matching CSS gradient so it scales cleanly. */
  .product-block_backend .product-comments__add-comment-cta .button--l{
    background: linear-gradient(180deg, #3974b4 0%, #073b82 100%);
  }
}

/* ===================== PRODUCT TABS ===================== */
.product-block_backend .gray-box{
  background: #f8f8f8;
  padding: 0;
}
.product-block_backend .tabs{
  max-width: 1150px;
  margin-inline: auto;
}
.product-block_backend .tabs__nav{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  position: relative;
  z-index: 2;
  margin: 0 0 -60px;
  padding: 0 max(16px, calc((100% - 950px) / 2));
  list-style: none;
  background: #ffffff;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #c9ced5 transparent;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-60px);
}
.product-block_backend .tabs__nav-item{
  flex: 0 0 auto;
  display: block;
}
.product-block_backend .tabs__nav-item:first-child{
  margin-left: auto;
}
.product-block_backend .tabs__nav-item:last-child{
  margin-right: auto;
}
.product-block_backend .tabs__nav-link{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px 26px;
  font-family: var(--font-display);
    font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #000000;
  white-space: nowrap;
  border-radius: 6px 6px 0 0;
  transition: color .15s ease, background-color .15s ease;
}
.product-block_backend .tabs__nav-link:hover{
  color: #09347b;
  background: #fafafa;
}
.product-block_backend .tabs__nav-link[aria-selected="true"]{
  color: #09347b;
  font-weight: 700;
  background: #f8f8f8;

  text-transform: uppercase;
}
.product-block_backend .tabs__body-cont{
  background: #f8f8f8;
}
.product-block_backend .tabs__body{
  max-width: 820px;
  min-height: 315px;
  margin: 0 auto;
  padding: 40px 0 52px;
  color: #000;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
}
.product-block_backend .tabs__body .text h2,
.product-block_backend .tabs__body .text h3,
.product-block_backend .tabs__body .text h4{
  margin: 0 0 20px;
  color: #000000;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}
.product-block_backend .tabs__body .text p{
  margin: 0 0 20px;
  font-size: 15px;
  color: #000000;
  font-weight: 400;
}
.product-block_backend .tabs__body .text{
  transition: max-height 600ms ease;
}
.product-block_backend .tabs__body .text.is-clamped{
  max-height: 338px;
  overflow: hidden;
}
.product-block_backend .product-description__toggle{
  display: none;
  align-items: center;
  gap: 13px;
  margin: 26px 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: #09347b;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  cursor: pointer;
}
.product-block_backend .product-description__toggle.is-visible{
  display: inline-flex;
}
.product-block_backend .product-description__toggle-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 11px;
}
.product-block_backend .product-description__toggle-icon img{
  display: block;
  width: 11px;
  height: 14px;
  transform: rotate(90deg);
  transition: transform 200ms ease;
}
.product-block_backend .product-description__toggle[aria-expanded="true"] .product-description__toggle-icon img{
  transform: rotate(-90deg);
}

.customer-info-band {
  background-color: #f0efef;
}

.customer-info-band .wrapper--middle {
    padding-bottom: 0;
}

@media (max-width: 768px){
  .product-block_backend .tabs__nav{
    margin: 0 0 -52px;
    padding-inline: 12px;
    scrollbar-width: none;
    transform: translateY(-52px);
  }
  .product-block_backend .tabs__nav::-webkit-scrollbar{
    display: none;
  }
  .product-block_backend .tabs__nav-item{
    flex: 0 0 auto;
  }
  .product-block_backend .tabs__nav-link{
    min-height: 52px;
    padding: 10px 18px;
    font-size: 11px;
  }
  .product-block_backend .tabs__body{
    min-height: 0;
    padding: 28px 18px 36px;
    font-size: 13px;
  }
}

.breadcrumbs-section.bgr-color .breadcrumbs{
  margin-bottom: 0;
}
.breadcrumbs{
  /* margin-bottom: 42px; */
}
.breadcrumbs__list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}
.breadcrumbs__item{
  display: inline-flex;
  align-items: center;
}
.breadcrumbs__item + .breadcrumbs__item::before{
  content: "/";
  float: none;
  padding-right: 0;
  margin: 0 4px;
  color: #9ca3af;
}
.breadcrumbs__link{
  color: #6b7280;
  text-decoration: none;
}
.breadcrumbs__link:hover{
  color: var(--primary);
}
.breadcrumbs__current{
  color: #09347b;
  font-weight: 700;
  font-size: 14px;;
}
.breadcrumbs__title{
  margin-top: 20px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.breadcrumbs__title--promo{
  color: #ff1111 !important;
}
/* Голямо breadcrumb заглавие + повече въздух (включва се от админ настройката на блока) */
.breadcrumbs__title--lg{ font-size: 50px; margin-top: 70px; }
/* 36px тук + 34px горен padding на следващата .section = 70px под заглавието */
.breadcrumbs-section:has(.breadcrumbs__title--lg){ padding-bottom: 36px; }
@media (max-width: 767px){
  /* Long single-word category names (Болкоуспокояващи) can't wrap, so scale the
     title with the viewport instead of letting it overflow. */
  .breadcrumbs__title{
    font-size: clamp(16px, 6.6vw, 30px);
    overflow-wrap: anywhere;
  }
  .breadcrumbs__title--lg{ font-size: 18px; margin-top: 24px; }
  .breadcrumbs-section:has(.breadcrumbs__title--lg){ padding-bottom: 12px; }
}
.section--alt{
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.40) 40%, transparent);
  position: relative;
}
.section--alt::before{
  content:"";
  position: absolute;
  left: 50%;
  top: -140px;
  width: min(1600px, 160vw);
  height: 260px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(closest-side at 50% 50%, rgba(255,255,255,0.55), transparent 72%);
  pointer-events: none;
}
.section__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.section__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.3px;
}
.section__link{
  font-size: var(--fs-13);
  color: var(--primary);
  font-weight: 700;
}
.section__link:hover{ text-decoration: underline; }

/* Mockup-like section headers */
.section__head--center{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  text-align: center;
}
.section__kicker{
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 10px 20px rgba(15,23,42,0.06);
}
.section__kicker svg{ width: 22px; height: 22px; }
.section__title--mock{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30pt;
  letter-spacing: 1.0px;
  text-transform: uppercase;
  color: var(--danger);
}
.section__title--mock-dark{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30pt;
  color: var(--primary);
  letter-spacing: 1.0px;
}
.section__link--under{
  margin-top: 2px;
  font-weight: 800;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  color: white;
  font-weight: 800;
  font-size: var(--fs-13);
  cursor: pointer;
}
.btn--solid{
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  border-color: rgba(255,255,255,0.18);
}
.btn--ghost{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}
.btn--small{
  padding: 9px 12px;
  font-weight: 800;
  border: 1px solid rgba(11,74,162,0.20);
  color: var(--primary);
  background: #f3f7ff;
}
.btn--cart{
  width: 100%;
  margin-top: 10px;
}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}
.card__title{
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.1px;
}
.card__meta{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.tag{
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 12px;
  border-radius: 0 0 16px 0;
  font-size: 12px;
  font-weight: 900;
  color: white;
}
.tag--sale{ background: var(--danger); }
.tag--new{ background: var(--success); }

/* Carousel (product/news) */
.carousel{
  position: relative;
}
.carousel .carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,23,42,0.06);
  border: 1px solid var(--line);
  color: var(--primary);
}
.carousel .carousel-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}
.carousel .carousel-btn:hover{ background: rgba(15,23,42,0.10); }
.carousel .carousel-btn--prev{ left: -6px; }
.carousel .carousel-btn--next{ right: -6px; }

.carousel__viewport{
  overflow: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 0;
}
.carousel__viewport::-webkit-scrollbar{ display:none; }
.carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  padding: 6px;
}
.carousel__track > *{ scroll-snap-align: start; }

/* Image cards from PSD exports */
.image-card{
  overflow: hidden;
  border-radius: var(--radius);
}
.image-card picture,
.image-card img{
  display: block;
  width: 100%;
  height: auto;
}
.image-card--post{ border-radius: 18px; }
.image-card--testimonial{ border-radius: 16px; }

/* Product card */
.product-card{
  padding: 14px 14px 70px;
  position: relative;
  min-height: 350px;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  text-align: center;
}
/* slidesPerView:"auto", . .
 .
 - . (responsive) . */
.product-list--three-items .product-list__item{
  width: min(282px, 78vw);
}
.card__fav{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.9);
  color: transparent; /* hide text */
}
.card__fav::before{
  content: "\2661";
  color: rgba(148,163,184,0.95);
  font-size: 20px;
  line-height: 1;
}
.card__fav:hover::before{ color: var(--danger); }
.product-card__media{
  height: 178px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.product-card__media img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

.price{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.price__old{
  order: 1;
  color: var(--primary);
  font-size: 13px;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.price__new{
  order: 2;
  font-weight: 900;
  color: var(--danger);
  font-size: var(--fs-22);
  letter-spacing: -0.2px;
}

.product-card .card__title{
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.product-card .card__meta{
  margin-top: 6px;
  color: var(--text);
}

/* Cart button like mockup: circle centered at bottom */
.btn--cart{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color: white;
  margin: 0;
  padding: 0;
  font-size: 0; /* hide text */
  box-shadow: 0 10px 20px rgba(11,74,162,0.20);
}
.btn--cart::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6h15l-2 9H7L5 3H2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.btn--cart:hover{ filter: brightness(1.05); }

/* Post card */
.post-card{ overflow: hidden; }
.post-card__img{
  display: block;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.post-card__img img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.post-card__body{ padding: 14px; }
.kicker{
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--danger);
  margin-bottom: 6px;
}
.kicker--blue{ color: var(--primary); }
.post-card__excerpt{
  margin: 10px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

/* Post card typography (closer to PSD) */
.post-card .card__title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.post-card .card__meta{
  font-size: 13px;
  color: var(--muted-2);
}

/* Banner */
.banner{
  margin-top: 18px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(110deg, var(--primary), var(--primary-2) 40%, rgba(1,83,148,0.65));
  box-shadow: var(--shadow);
}
.banner__img{ display:block; }
.banner__img img{ display:block; width: 100%; height: auto; }

/* Testimonials */
.testimonials{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.testimonial{
  padding: 16px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}
.testimonial__avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.10);
  background: #fff;
  display: grid;
  place-items: center;
}
.testimonial__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial__avatar--alt{ border-color: rgba(124,58,237,0.18); }
.testimonial__avatar{ justify-self: center; }
.testimonial > div:last-child{ display: flex; flex-direction: column; justify-content: center; }
.testimonial__text{ margin: 0 0 10px; color: var(--text); font-weight: 400; font-size: 14px; font-style: italic; }

/* Decorative quotes — added via CSS so admin text stays plain (no literal quotes).
   Big bold opening mark hangs top-left; matching big closing mark at the end.
   254px font-size renders a ~50px visible glyph (the mark sits in the upper em). */
.testimonial__text{
  position: relative;
  padding-top: 15px;
  text-indent: 17px;
}
.testimonial__text::before{
  content: "\201C";
    position: absolute;
    left: 3px;
    top: 7px;

    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    font-style: normal;
    color: #1a1a1a;
    pointer-events: none;
    transform: translateY(4px) rotate(180deg);
}
.testimonial__text::after{
  content: "\201D";
  display: inline-block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  font-style: normal;
  color: #1a1a1a;
  vertical-align: -0.2em;
  pointer-events: none;
  margin-left: -15px;
}
.testimonial__name{ font-weight: 900; font-size: 13px; margin-bottom: 6px; }
.testimonial__link{ color: var(--primary); font-weight: 800; font-size: 13px; }
.testimonial__link:hover{ text-decoration: underline; }

/* Testimonials page-builder block */
.testimonials-section{
  background: #f8f8f8;
  padding-top: 90px;
  padding-bottom: 90px;
}
.testimonials-section__head{
  max-width: 1220px;
  margin: 0 auto 58px;
  text-align: center;
}
.testimonials-section__title{
  margin: 0 0 28px;
  color: #09347b;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
}
.testimonials-section__intro{
  color: #555555;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
}
.testimonials-slider{
  position: relative;
  padding: 0 120px;
}
.testimonials-slider__viewport{
  overflow: hidden;
}
.testimonials-slider__slide{
  width: min(640px, 100%);
  height: auto;
}
.testimonials-slider .testimonial{
  min-height: 150px;
  height: 100%;
  align-items: center;
  gap: 18px;
}
.testimonials-slider__button{
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #09347b;
  font-family: var(--font-display);
  font-size: 100px;
  font-weight: 100;
  line-height: 1;
  cursor: pointer;
}
.testimonials-slider__button--prev{
  left: 0;
  color: #b7b7b7;
}
.testimonials-slider__button--next{
  right: 0;
}
.testimonials-slider__button.swiper-button-disabled{
  opacity: 0.45;
  cursor: default;
}
.testimonials-slider__pagination{
  position: static !important;
  margin-top: 24px;
}
.testimonials-slider .testimonial__avatar{
  /* align-self: center; */
  margin-top: 0;
}
.testimonials-slider .testimonial__text{
  margin-bottom: 12px;
}
.testimonials-slider .testimonial__name{
  text-align: end;
  padding-right: 15px;
}
.testimonials-section + .container-fluid.g-0.mt-5{
  margin-top: 0 !important;
}
@media (min-width: 1025px) and (max-width: 1199.98px){
  .testimonials-slider__viewport{
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (min-width: 1200px){
  .testimonials-slider__viewport{
    max-width: 1190px;
    margin: 0 auto;
  }
  .testimonials-slider__slide{
    width: min(580px, calc((100% - 30px) / 2));
  }
}

/* ===================== SUBCATEGORY CIRCLE SLIDER (.subcats) ===================== */
.subcats{
  margin: 20px 0 28px;
  padding: 8px 0;
}
.subcats__slider{
  position: relative;
}
.subcats__slider .swiper-container{
  width: 100%;
  overflow: hidden;
  padding: 20px 4px 20px;
  margin: -20px 0 -20px;
}
.subcats__slider .swiper-wrapper{
  justify-content: flex-start;
}
/* slidesPerView:"auto" each slide is as wide as its bubble */
.subcats__slide{
  width: calc(12.5% - 26.25px);
  display: flex;
  justify-content: center;
}
.subcat{
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  padding: 10px;
  border-radius: 50%;
  text-align: center;
  background: url('../images-new/pattern_product_cats.png') center/cover no-repeat;
  border: 1px solid #dbe6f5;
  box-shadow: 0 6px 14px rgba(9,52,123,0.10);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
/* Hover: brand-colour layers rise and blend, settling on the final blue */
.subcat::before,
.subcat::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 50%;
  transition: transform 0.9s cubic-bezier(.19, 1, .22, 1);
}
.subcat::before{ background: #5072A1; }                       /* rises first  */
.subcat::after{ background: #09347b; transition-delay: 0.12s; } /* final colour */
.subcat:hover{
  transform: translateY(-3px);
  box-shadow: none;
  border-color: transparent;
}
.subcat:hover::before,
.subcat:hover::after{
  transform: translate(-50%, -50%) scale(1);
}
.subcat:hover .subcat__label{ color: #fff; }
.subcat__label{
  position: relative;
  z-index: 1;
  max-width: 112px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  color: var(--primary);
  transition: color 0.4s ease 0.15s;
}
/* Navigation arrows flanking the row */
.subcats__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #9db6d8;
  transition: color 150ms ease;
  z-index: 2;
}
.subcats__nav--prev{ left: -64px; }
.subcats__nav--next{ right: -64px; }
.subcats__nav:hover{ color: var(--primary); }
.subcats__nav[disabled],
.subcats__nav.swiper-button-disabled{
  opacity: 0.35;
  cursor: default;
}
.subcats__nav-icon{
  display: block;
  width: 32px;
  height: 37px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 37'%3E%3Cpath d='M16 3 L3 18.5 L16 34 M31 3 L18 18.5 L31 34' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 37'%3E%3Cpath d='M16 3 L3 18.5 L16 34 M31 3 L18 18.5 L31 34' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.subcats__nav--next .subcats__nav-icon{ transform: scaleX(-1); }

@media (max-width: 1699px){
  .subcats__slider{
    padding: 0 56px;
  }
  .subcats__slide{
    width: calc((100% - 180px) / 7);
  }
  .subcats__nav--prev{ left: 0; }
  .subcats__nav--next{ right: 0; }
}

@media (max-width: 1399px){
  .subcats__slide{
    width: calc((100% - 150px) / 6);
  }
}

@media (max-width: 1199px){
  .subcats__slide{
    width: calc((100% - 120px) / 5);
  }
  .subcats__nav{
    display: grid;
  }
}

@media (max-width: 991px){
  .subcats__slider{
    padding: 0 48px;
  }
  .subcats__slide{
    width: calc((100% - 90px) / 4);
  }
  .subcat{
    width: min(140px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 767px){
  .subcats{
    margin: 10px 0 24px;
    padding: 4px 0;
  }
  .subcats__slider{
    padding: 0 32px;
  }
  .subcats__slider .swiper-container{
    padding: 14px 0;
    margin: -14px 0;
  }
  .subcats__slide{
    width: calc((100% - 14px) / 2);
  }
  .subcat{
    width: min(118px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 8px;
  }
  .subcat__label{
    max-width: calc(100% - 12px);
    font-size: 10px;
    line-height: 1.12;
  }
  .subcats__nav{
    display: grid;
    width: 32px;
    height: 48px;
  }
  .subcats__nav--prev{ left: 0; }
  .subcats__nav--next{ right: 0; }
  .subcats__nav-icon{
    width: 20px;
    height: 24px;
  }
}

@media (max-width: 359px){
  .subcats__slider{
    padding: 0 28px;
  }
  .subcats__nav{
    width: 28px;
  }
  .subcats__nav-icon{
    width: 18px;
    height: 22px;
  }
}

.breadcrumbs-section {
  padding: 18px 0;
}
/* Category page: keep ~50px below the title when no subcategory slider follows */
.breadcrumbs-section:has(+ .wrapper .category-filter-form){
  padding-bottom: 33px;
}

/* ===================== CATEGORY BANNER SLIDER (.product-banner) ===================== */
.product-banner--bannersInnerTop{ background: var(--bg); padding: 0 0 24px 0; }

/* Rounded banner (picture.aspect-ratio already clips with overflow:hidden) */
.product-banner .aspect-ratio{ border-radius: var(--radius); }

/* No side arrows design uses dots only */
.product-banner .footer-slider{ display: none; }

/* Allow pagination to flow below the swiper (swiper.css sets overflow:hidden) */
.product-banner .swiper-container{
  overflow-x: hidden;
  overflow-y: visible;
}
/* Pagination dots sit below the banner, always reserve the same space */
.product-banner .swiper-pagination{
  position: static !important;
  display: block;
  min-height: 19px;
  padding-top: 14px;
  width: auto !important;
  margin-top: 0;
  text-align: center;
}
.product-banner .swiper-pagination .swiper-pagination-bullet{
  display: inline-block !important;
  width: 40px !important;
  height: 5px !important;
  margin: 0 5px !important;
  background: #c5d0e0;
  opacity: 1;
  border-radius: 999px;
  left: auto !important;       /* cancel dynamicBullets inline offset */
  transform: none !important;  /* cancel dynamicBullets scaling */
  transition: width 200ms ease, background 200ms ease;
}
.product-banner .swiper-pagination .swiper-pagination-bullet-active{
  background: var(--primary);
}
.product-banner .swiper-pagination.swiper-pagination-lock{
  display: block !important;
  visibility: hidden;
}

/* Footer banner carries the .product-banner look; this only adds the footer's
   vertical spacing, kept outside the slider so it stays the same with or
   without Swiper pagination. */
.main-footer__banner{
  width: 100%;
  background: #fff;
  margin: 85px 0;
  padding: 0;
}

@media (max-width: 767px){
  .main-footer__banner{
    margin: 30px 0;
  }
}

/* ===================== HOMEPAGE HERO SLIDER (.presentation-slider) ===================== */
.presentation-slider-section{ padding: 0 0 0 0; }
.presentation-slider-section--single{ margin-bottom: 23px; }

/* Subtle fade-in on load */
.presentation-slider-section{
  animation: presentation-slider-fade-in 500ms ease both;
}
@keyframes presentation-slider-fade-in{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .presentation-slider-section{ animation: none; }
}

/* Rounded banner (picture.aspect-ratio already clips with overflow:hidden) */
.presentation-slider-section .aspect-ratio{ border-radius: var(--radius); }

/* Fill the banner box edge-to-edge overrides the global contain (kept for
 product gallery) so the hero has no letterbox bars and matches the design. */
.presentation-slider-section .aspect-ratio img{ object-fit: cover; }

/* Allow pagination to flow below the swiper (swiper.css sets overflow:hidden) */
.presentation-slider-section .swiper-container{
  overflow-x: hidden;
  overflow-y: visible;
}
/* Pagination dots centered below the banner, reserve consistent space */
.presentation-slider-section .swiper-pagination{
  position: static !important;
  display: block;
  min-height: 19px;
  padding-top: 20px;
  padding-bottom: 23px;
  width: auto !important;
  margin-top: 0;
  text-align: center;
}
.presentation-slider-section .swiper-pagination .swiper-pagination-bullet{
  display: inline-block !important;
  width: 40px !important;
  height: 5px !important;
  margin: 0 5px !important;
  background: #c5d0e0;
  opacity: 1;
  border-radius: 999px;
  left: auto !important;       /* cancel dynamicBullets inline offset */
  transform: none !important;  /* cancel dynamicBullets scaling */
  transition: width 200ms ease, background 200ms ease;
}
.presentation-slider-section .swiper-pagination .swiper-pagination-bullet-active{
  background: var(--primary);
}
.presentation-slider-section .swiper-pagination.swiper-pagination-lock{
  display: block !important;
  visibility: hidden;
}

/* Footer  */
.site-footer{
  margin-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.10);
}
.footer-top{
  background: #e9f0fb;
}

.main-footer .footer-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.main-footer .footer-nav__col{
  position: relative;
  z-index: 1;
  flex: 0 0 100%;
  max-width: 100%;
  padding: 48px 24px;
  background: #eff3f8;
}
.main-footer .footer-nav__col::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50vw;
  right: -50vw;
  z-index: -1;
  background: inherit;
}
.main-footer .subra-footer-col-left{
  background: #eff3f8;
}
.main-footer .subra-footer-col-middle{
  background: #e5edf4;
}
.main-footer .subra-footer-col-right{
  background: #d6e2ee;
}
.main-footer .footer-nav__title{
  display: block;
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: #1d4f8a;
}
.main-footer .footer-nav__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-footer .footer-nav__col--wide .footer-nav__list{
  column-count: 1;
  column-gap: 0;
}
.main-footer .footer-nav__list li{
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  break-inside: avoid;
}
.main-footer .footer-nav__list a{
  display: inline-flex;
  align-items: center;
  color: #000000;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
.main-footer .footer-nav__list a::before{
  content: "\203A";
  margin-right: 10px;
  color: #000000;
  font-size: 20px;
  font-weight: 700;
  line-height: 0.8;
  transition: color 0.15s ease-in-out;
}
.main-footer .footer-nav__list a:hover,
.main-footer .footer-nav__list a:hover::before{
  color: #1d4f8a;
}

@media (min-width: 768px) and (max-width: 991.98px){
  .main-footer .subra-footer-col-left{
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }
  .main-footer .subra-footer-col-left::before{
    left: -50vw;
    right: -50vw;
  }
  .main-footer .subra-footer-col-middle{
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 32px;
    padding-right: 32px;
  }
  .main-footer .subra-footer-col-middle::before{
    left: -50vw;
    right: 0;
  }
  .main-footer .subra-footer-col-right{
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 32px;
    padding-right: 40px;
  }
  .main-footer .subra-footer-col-right::before{
    left: 0;
    right: -50vw;
  }
  .main-footer .footer-nav__col--wide .footer-nav__list{
    column-count: 2;
    column-gap: 30px;
  }
}

@media (min-width: 992px){
  .actions .user-nav{
    gap: 36px;
  }
  .main-footer .subra-footer-col-left{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 72px 64px 76px max(32px, calc((100vw - 1560px) / 2));
  }
  .main-footer .subra-footer-col-left::before{
    left: -50vw;
    right: 0;
  }
  .main-footer .subra-footer-col-middle{
    flex: 0 0 18.333333%;
    max-width: 18.333333%;
    padding: 72px 48px 76px 64px;
  }
  .main-footer .subra-footer-col-middle::before{
    display: none;
  }
  .main-footer .subra-footer-col-right{
    flex: 0 0 31.666667%;
    max-width: 31.666667%;
    padding: 72px max(32px, calc((100vw - 1560px) / 2)) 76px 64px;
  }
  .main-footer .subra-footer-col-right::before{
    left: 0;
    right: -50vw;
  }
  .main-footer .footer-nav__col--wide .footer-nav__list{
    column-count: 2;
    column-gap: 30px;
  }

}

@media (min-width: 992px) and (max-width: 1199.98px){
  .main-footer .subra-footer-col-left{
    flex-basis: 50%;
    max-width: 50%;
    padding-left: 44px;
    padding-right: 40px;
  }
  .main-footer .subra-footer-col-middle{
    flex-basis: 25%;
    max-width: 25%;
    padding-left: 36px;
    padding-right: 28px;
  }
  .main-footer .subra-footer-col-right{
    flex-basis: 25%;
    max-width: 25%;
    padding-left: 36px;
    padding-right: 36px;
  }
}
@media (max-width: 767.98px){
  .main-footer .footer-nav__col{ padding: 0; }
  .main-footer .footer-nav__col::before{ display: none; }
  .main-footer .subra-footer-col-left{
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }
  .main-footer .subra-footer-col-right{
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
  .main-footer .footer-nav__title{
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 55px;
    margin: 0;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #09347b;
  }
  .main-footer .footer-nav__title::before{
    content: "\203A";
    font-size: 20px;
    line-height: 1;
    color: #1d4f8a;
    transition: transform 0.2s ease;
  }
  .main-footer .footer-nav__col.is-open .footer-nav__title::before{
    transform: rotate(90deg);
  }
  .main-footer .footer-nav__list{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 24px;
  }
  .main-footer .footer-nav__col.is-open .footer-nav__list{
    padding-bottom: 16px;
  }
  .main-footer .footer-nav__col--wide .footer-nav__list{
    column-count: auto;
  }
  .main-footer .footer-social{ display: none; }

  .main-footer .footer-nav__list li a {
    font-size: 14px;
  }

  .footer-bottom__check-text {
    margin-top: 15px;
  }

  .footer-bottom__inner.row>* {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Footer contacts row — mobile only (under the logo) */
.footer-contacts{ display: none; }
@media (max-width: 767.98px){
  .footer-bottom__check{ flex-direction: column; }
  .footer-contacts{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-self: stretch;
    width: calc(100% + 6px);
    margin: 25px -3px 0;
  }
  .footer-contacts__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 6px;
    background: #eef2f7;
    border-radius: 14px;
    text-decoration: none;
  }
  .footer-contacts__icon{
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -30px;
    border-radius: 50%;
    background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
  }
  .footer-contacts__icon img{
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .footer-contacts__label{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #09347b;
    text-align: center;
  }
}
.footer-top__grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0;
  border-left: 1px solid rgba(0,0,0,0.06);
  border-right: 1px solid rgba(0,0,0,0.06);
}
.footer-col{
  padding: 32px 34px;
  background: #dfe9f6;
}
.footer-col:nth-child(1){ background: #e9f0fb; }
.footer-col:nth-child(2){ background: #dfe9f6; }
.footer-col:nth-child(3){ background: #dfe9f6; }
.footer-col + .footer-col{ border-left: 1px solid rgba(0,0,0,0.06); }

.footer-col--wide{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 46px;
}
.footer__title{
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--primary);
  font-size: 20px;
  letter-spacing: -0.2px;
}
.footer__title--ghost{ opacity: 0; user-select: none; }
.footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer__list li{
  position: relative;
  padding-left: 14px;
}
.footer__list li::before{
  content: "\203A";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text);
  opacity: 0.8;
}
.footer__link{
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: 500;
}
.footer__link:hover{ text-decoration: underline; }

.footer-social{
  margin-top: 24px;
}
.footer-social__title{
  display: block;
  margin: 0 0 20px 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: #1d4f8a;
}
.footer-social__icons{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.social-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.28));
  transition: transform 200ms ease, filter 200ms ease;
}
.social-btn__icon{
  display: block;
  width: 20px;
  height: 20px;
  fill: #ffffff;
}
.social-btn:hover{
  transform: translateY(-1px);
  filter: none;
}

.footer-bottom{
  background: #ffffff;
  /* border-top: 1px solid rgba(0,0,0,0.08); */
}
.footer-bottom__social{ display: none; }

/* ===================== STICKY MOBILE TAB BAR ===================== */
.app-tabbar{ display: none; }
.arrow-up-scroll{ display: none; }
@media (max-width: 767.98px){
  .app-tabbar{
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65px;
    padding-bottom: env(safe-area-inset-bottom);
    background: #09347b;
    justify-content: space-around;
    align-items: center;
    z-index: 99;
  }
  .app-tabbar__item{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
  }
  .app-tabbar__icon-wrap{
    position: relative;
    display: inline-flex;
  }
  .app-tabbar__icon{
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .app-tabbar__badge{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff2020;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    transition: opacity 250ms ease, visibility 250ms ease;
  }
  .app-tabbar__badge.is-active{
    opacity: 1;
    visibility: visible;
  }
  .app-tabbar__menu{
    flex: 0 0 auto;
    align-self: flex-end;
    width: 108px;
    height: 108px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url('../images-new/Button_freeze.png') center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: -17px;
  }
  .app-tabbar__burger,
  .app-tabbar__burger::before,
  .app-tabbar__burger::after{
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: #09347b;
  }
  .app-tabbar__burger{ position: relative; }
  .app-tabbar__burger::before{ position: absolute; top: -8px; left: 0; }
  .app-tabbar__burger::after{ position: absolute; top: 8px; left: 0; }
  .app-tabbar__menu[aria-expanded="true"] .app-tabbar__burger{
    background: transparent;
  }
  .app-tabbar__menu[aria-expanded="true"] .app-tabbar__burger::before{
    top: 0;
    transform: rotate(45deg);
  }
  .app-tabbar__menu[aria-expanded="true"] .app-tabbar__burger::after{
    top: 0;
    transform: rotate(-45deg);
  }
  body{ padding-bottom: calc(65px + env(safe-area-inset-bottom)); }

  .arrow-up-scroll{
    position: fixed;
    right: 16px;
    bottom: calc(75px + env(safe-area-inset-bottom));
    z-index: 98;
    display: flex;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: url('../images-new/default_Button.svg') center / cover no-repeat;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 250ms ease, visibility 250ms ease;
  }
  .arrow-up-scroll .icon{
    width: 20px;
    height: 20px;
    fill: currentColor;
    transform: rotate(-90deg);
  }
  .up-visible .arrow-up-scroll{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .filters-open .arrow-up-scroll,
  .overflow-hidden .arrow-up-scroll{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* В чекаута хедърът се рендерира с cart_disabled, значи #main_header_basket_wrapper
   го няма и countBasketItems() излиза рано, без да обнови брояча. Скриваме го,
   вместо да показваме хардкоднатата нула от markup-а. */
.checkout-funnel .app-tabbar__badge.js-basket-count{ display: none; }

@media (max-width: 767.98px){
  .footer-bottom__social{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }
  .footer-bottom__check{ order: 1; }
  .footer-consent{ order: 2; flex-direction: column; font-weight: 400; }
  .footer-bottom__text{ order: 3; margin-top: 15px !important }
}
.footer-bottom__inner{
  padding: 67px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 128px;
}
.footer-bottom__check{
  gap: 18px;
}
.footer-bottom__brand{
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  line-height: 0;
}
.footer-bottom__brand-img{
  width: 112px;
  height: auto;
}
.footer-bottom__check-content{
  display: flex;
  align-items: center;
  min-width: 0;
}
.footer-bottom__check-img{
  display: none;
}
.footer-bottom__check-text{
  margin: 0;
  color: #1d4f8a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.footer-bottom__check-link{
  display: block;
  color: var(--danger);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-bottom__text{
  margin: 0;
  /* color: #6b7280; */
  font-size: 12px;
  line-height: 1.45;
}
.footer-bottom__text strong{
  color: #1f2937;
  font-weight: 700;
}
.footer-consent{
  gap: 10px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.footer-consent:hover{
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-consent__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 28px;
}
.footer-consent__icon img{
  display: block;
  width: 100%;
  height: 100%;
  fill: #ffffff;
}

@media (max-width: 1024px){
  .footer-top__grid{ grid-template-columns: 1fr; border-left: none; border-right: none; }
  .footer-col{ padding: 24px 18px; }
  .footer-col + .footer-col{ border-left: none; border-top: 1px solid rgba(0,0,0,0.06); }
  .footer-col--wide{ grid-template-columns: 1fr; gap: 18px; }
  .footer-bottom__inner{ padding: 30px 0 34px; }
  .footer-bottom__check{ flex-direction: column; text-align: center; }
}

/* Responsive */
@media (max-width: 1024px){
  .headbar__inner{ grid-template-columns: auto auto 1fr auto; }
  .nav{ display: none; }
  .headbar__burger{ display: grid; }
  .search{ width: auto; min-width: unset; }
  .feature-row{ grid-template-columns: repeat(2, 1fr); border-radius: 22px; }
  .feature + .feature::before{ display:none; }
  .feature:nth-child(2)::before,
  .feature:nth-child(4)::before{ display:none; }
  .feature:nth-child(3)::before{ display:none; }
  .hero__slide{ grid-template-columns: 1fr; }
  .hero__art{ display: none; }
  .hero-custom{ grid-template-columns: 1fr; }
  .hero-custom__stack{ display: none; }
  .carousel .carousel-btn--prev{ left: -2px; }
  .carousel .carousel-btn--next{ right: -2px; }
}

@media (min-width: 1024px) and (max-width: 1199.98px){
  .headbar__inner{
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 12px;
  }
  .nav{ display: none; }
  .headbar__burger{ display: grid; }
  .search{
    width: 100%;
    min-width: 0;
  }
  .headbar__inner > .actions{ min-width: 0; }

}

@media (min-width: 769px) and (max-width: 1199.98px){
  .headbar__inner{
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "brand search actions burger";
  }
  .headbar__left{ grid-area: brand; }
  .search{ grid-area: search; }
  .headbar__inner > .actions{ grid-area: actions; }
  .headbar__burger{
    grid-area: burger;
    justify-self: end;
    width: 42px;
    height: 42px;
    border: none;
    background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
    color: #fff;
  }
  .headbar__burger svg{
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px){
  .headbar__inner{
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }
  .search{
    width: 100%;
    min-width: 0;
  }
  .search__input{ min-width: 0; }
  .search__btn{ flex: 0 0 40px; }
  .headbar__inner > .actions{ min-width: 0; }
  .actions .user-nav{ gap: 12px; }
}

@media (max-width: 768px){
  .site-header{
    position: static;
  }

  /* Mobile header per Figma: single row [logo | search | EN | burger] */
  .headbar__inner{
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "brand search lang burger";
    gap: 8px;
  }
  .headbar__left{ grid-area: brand; justify-self: start; }
  .search{ grid-area: search; width: 100%; min-width: 0; }
  .actions{ grid-area: lang; justify-self: end; }
  .headbar__burger{ grid-area: burger; justify-self: end; }

  /* Compact logo to match Figma proportion (~102x42) */
  .brand__img img{ max-height: 42px; }

  /* Hide nav pills + all action icons; keep only the EN language switch */
  .actions .user-nav{ gap: 0; }
  .actions .user-nav__item{ display: none; }

  /* EN circle (~42px) */
  .lang-switch{ width: 42px; height: 42px; }

  /* Hamburger as solid blue circle with white icon */
  .headbar__burger{
    width: 42px;
    height: 42px;
    border: none;
    background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
    color: #fff;
  }
  .headbar__burger svg{ width: 20px; height: 20px; }

  /* Search pill matching Figma */
  .search{
    gap: 6px;
    padding: 3px 4px 3px 16px;
    background: #f6f4f4;
  }
  .search__btn{ width: 36px; height: 36px; }
  .site-header.mobile-search-focus .headbar__inner{
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "brand lang burger"
      "search search search";
  }
  .site-header.mobile-search-focus .search{
    width: 100%;
    justify-self: stretch;
  }
  .mobile-search-float{
    display: grid;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .mobile-search-float.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .topbar__left em{ font-size: 12px; }
  .topbar__tel span,
  .topbar__tel strong{ display: none; }
  .hero{ padding-top: 10px; }
  .hero__slide{ padding: 20px; min-height: 280px; }
  .testimonials{ grid-template-columns: 1fr; }
  .testimonials-section{
    padding-top: 34px;
    padding-bottom: 34px;
  }
  .testimonials-section__head{
    margin-bottom: 30px;
  }
  .testimonials-section__title{
    margin-bottom: 18px;
    font-size: 24px;
  }
  .testimonials-section__intro{
    font-size: 13px;
    line-height: 22px;
  }
  .testimonials-slider{
    padding: 0;
  }
  .testimonials-slider__button{
    display: none;
  }
  .testimonials-slider__slide{
    width: 100%;
  }
  .testimonials-slider .testimonial{
    gap: 14px;
  }
  .footer__grid{ grid-template-columns: 1fr; }

  .footer-bottom__check-link {
    color: var(--primary);
    font-weight: 400;
  }

  .footer-consent{
    font-weight: 400;
    text-decoration: underline;
  }
}

@media (max-width: 767px){
  .testimonials-section{
    margin-left: 12px;
    margin-right: 12px;
    padding: 34px 18px 36px;
    border-radius: 20px;
    margin-bottom: 30px;
  }
  .testimonials-section .wrapper{
    padding-left: 0;
    padding-right: 0;
  }
  .testimonials-section__head{
    margin-bottom: 30px;
  }
  .testimonials-section__title{
    margin-bottom: 24px;
  }
  .testimonials-section__intro{
    margin-left: auto;
    margin-right: auto;
    max-width: 370px;
  }
  .testimonials-slider{
    padding: 0;
  }
  .testimonials-slider__button{
    display: none;
  }
  .testimonials-slider__viewport{
    overflow: hidden;
  }
  .testimonials-slider__slide{
    width: 100% !important;
  }
  .testimonials-slider .testimonial{
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 270px;
    padding: 30px 24px 26px;
    gap: 18px;
    border: 0;
    border-radius: 20px;
  }
  .testimonials-slider .testimonial > div:last-child{
    align-items: center;
    justify-content: flex-start;
    text-align: center;
  }
  .testimonials-slider .testimonial__avatar{
    width: 80px;
    height: 80px;
  }
  .testimonials-slider .testimonial__text{
    margin-bottom: 8px;
  }
  /* The text is centred here, so the opening mark can't hang at the left edge —
     it would sit far from the first line. Let it flow inline like the closing
     one instead. */
  .testimonials-slider .testimonial__text{
    padding-top: 0;
    text-indent: 0;
  }
  .testimonials-slider .testimonial__text::before{
    position: static;
    display: inline-block;
    margin-right: 4px;
    transform: translateY(2px) rotate(180deg);
  }
  /* Text is centred here, so trailing space is trimmed at the line end and the
     global -15px pulls the closing mark on top of the last word. Reset it and
     let a small positive gap keep the mark just after the text. */
  .testimonials-slider .testimonial__text::after{
    margin-left: 2px;
  }
  .testimonials-slider .testimonial__name{
    padding-right: 0;
    text-align: center;
  }
  .testimonials-slider__pagination{
    display: flex;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    /* margin-top: 18px; */
    overflow: visible;
  }
  .testimonials-slider__pagination.swiper-pagination-bullets-dynamic{
    overflow: visible;
  }
  .testimonials-slider__pagination .swiper-pagination-bullet{
    width: 40px;
    height: 4px;
    margin: 0 !important;
    border-radius: 20px;
    left: auto !important;
    transform: none !important;
  }
  .testimonials-slider__pagination .swiper-pagination-bullet-active{
    background: var(--primary);
  }
}

@media (max-width: 420px){
  .actions .icon-btn:not(.icon-btn--primary){ display: none; }
  .feature-row{ grid-template-columns: 1fr; border-radius: 22px; }
  .carousel__track{ grid-auto-columns: minmax(200px, 1fr); }
}

/* Mobile menu panel */
.mobile-nav{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 80;
}
.mobile-nav[aria-hidden="false"]{ display: block; }
.mobile-nav__panel{
  width: min(360px, 92vw);
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 14px;
}
.mobile-nav__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mobile-nav__links{
  display: grid;
  gap: 8px;
  padding: 10px 0;
}
.mobile-nav__links a{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-weight: 700;
  background: var(--surface-2);
}

/* Mega menu */
.mega{
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 70;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.mega::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 130px;
  bottom: 0;
  background: #edf0f5;
  opacity: 0;
  transition: opacity 180ms ease;
}
.mega[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
  cursor: pointer;
}
.mega[aria-hidden="false"]::before{
  opacity: 1;
}
.mega__panel{
  margin-top: 130px; /* align with main content below the sticky header */
  padding: 0 0 20px;
  opacity: 0;
  transform: translateY(-8px) scale(0.99);
  transition: opacity 200ms ease, transform 200ms cubic-bezier(.2,.9,.2,1);
  position: relative;
  z-index: 1;
}
.mega__panel .container{
  --container: var(--subra-container-xxl);
}
.mega[aria-hidden="false"] .mega__panel{
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (min-width: 1200px){
  .mega{
    inset: 130px 0 0;
    transition: opacity 180ms ease, visibility 0s linear 180ms, top 300ms ease;
  }
  /* The header shrinks to 88px on scroll (.header--compact hides the topbar and
     scales the logo down); follow it so no gap opens under it. */
  .site-header.header--compact + .mega{
    inset: 88px 0 0;
  }
  .mega[aria-hidden="false"]{
    transition: opacity 180ms ease, top 300ms ease;
  }
  .mega::before{
    top: 0;
  }
  .mega__panel{
    margin-top: 0;
  }
}
.mega__wrap{ position: relative; }
.mega__wrap::before{
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  right: 3px;
  height: 4px;
  background: var(--primary);
  border-radius: 50px 50px 0px 0px;
  z-index: 2;
  pointer-events: none;
}
.mega__bar{ display: none; }
.mega__close{
  display: none;
  position: absolute;
  right: -14px;
  top: -14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  color: var(--primary);
  place-items: center;
  z-index: 2;
}
.mega__close:hover{ border-color: rgba(11,74,162,0.35); }
.mega__grid{
  background: #edf0f5;
  border: 1px solid #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin: 0 auto;
  width: 100%;
  max-height: calc(100vh - 112px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 430px;
  min-height: 340px;
}
.mega__grid.mega__grid--without-products{
  grid-template-columns: 300px minmax(0, 1fr);
}
.mega__cats{
  padding: 18px 16px;
  background: #edf0f5;
  /* border-right: 1px solid var(--line); */
  display: grid;
  gap: 8px;
  align-content: start;
  grid-auto-rows: max-content;
}
.mega-cat{
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 13px;
  /* border: 1px solid transparent; */
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: #000;
  font-weight: 800;
  font-size: 13px;
  position: relative;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.98);
}
.mega-cat:hover{ background: #f8f9fb; border-color: rgba(11,74,162,0.10); }
.mega-cat.is-active{
  color: #163C7D;
  background: #f8f9fb;
  /* border-color: rgba(11,74,162,0.22); */
  border-right-color: transparent;
  border-radius: 13px 0 0 13px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.05);
  z-index: 1;
}
.mega-cat.is-active::after{
  content: "";
  position: absolute;
  top: 0;
  right: -17px;
  bottom: 0;
  width: 18px;
  background: #f8f9fb;
  /* border-top: 1px solid rgba(11,74,162,0.22);
  border-bottom: 1px solid rgba(11,74,162,0.22); */
  pointer-events: none;
}
.mega-cat__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: url('/frontend/images-new/icons/menu_icons/1_button_bg.png') center / cover no-repeat;
  color: white;
  display: grid;
  place-items: center;
}
.mega-cat:hover .mega-cat__icon,
.mega-cat.is-active .mega-cat__icon{
  background-image: url('/frontend/images-new/icons/menu_icons/2_button_bg.png');
}
.mega-cat__icon svg{ width: 18px; height: 18px; }
.mega-cat__icon img{ width: 20px; height: 20px; object-fit: contain; }
.mega-cat__icon--has-hover .mega-cat__icon-img--hover{ display: none; }
.mega-cat:hover .mega-cat__icon--has-hover .mega-cat__icon-img--default,
.mega-cat.is-active .mega-cat__icon--has-hover .mega-cat__icon-img--default{ display: none; }
.mega-cat:hover .mega-cat__icon--has-hover .mega-cat__icon-img--hover,
.mega-cat.is-active .mega-cat__icon--has-hover .mega-cat__icon-img--hover{ display: inline-block; }
.mega-cat__chev{ color: rgba(15,23,42,0.45); font-size: 18px; }
.mega-cat.is-active .mega-cat__chev { color: #163C7D; }
.mega-cat__new{ color: var(--danger); font-weight: 900; }

.mega-cat__panel{ display: none; }

.mega__subs{
  margin: 14px 14px 14px 0;
  padding: 22px 22px 18px;
  background: #f8f9fb;
  border-radius: 14px;
  transition: opacity 160ms ease, transform 160ms ease;
  align-self: stretch;
  width: auto;
}
.mega__subs.is-switching{
  opacity: 0;
  transform: translateY(6px);
}
.mega__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--primary);
}
.mega__subs .mega__list{
  gap: 12px;
  min-height: 100%;
  align-content: start;
}
.mega__subs .mega__list--two-col{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
  row-gap: 10px;
}
.mega__subs .mega__list--two-col > li{
  break-inside: avoid;
}
.mega__list a{
  display: inline-flex;
  padding: 8px 6px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 13px;
  color: #000;
}
.mega__list a:hover{ background: #f3f7ff; }

.mega__side{
  margin: 14px 14px 14px 0;
  padding: 0;
  background: transparent;
  border-left: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}
.mega__side[hidden]{
  display: none;
}
.mega-card{
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.04);
}
.mega-card__products{
  display: grid;
  gap: 18px;
}
.mega-card__products .mega-product + .mega-product{
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.mega-card__title{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--primary);
  margin-bottom: 12px;
}
.mega-card__title--sale{ color: var(--danger); }
.mega-product{
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.mega-product__img{
  width: 100%;
  max-width: 170px;
  margin: 0 auto;
  background: transparent;
}
.mega-product__body{
  min-width: 0;
}
.mega-product__name{
  display: -webkit-box;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  text-transform: uppercase;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.mega-product__desc{
  color: #343a46;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
  margin-bottom: 0;
}
.mega-product__old-price{
  color: #09347b;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  margin: 8px 0 0;
  text-decoration: line-through;
}
.mega-product__price{
  font-weight: 400;
  margin: 8px 0 0;
  color: #09347b;
  font-size: 24px;
  line-height: 1.15;
}
.mega-product__price--sale{ color: #ff0000; }
.mega-product__cart{
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 7px 14px rgba(11,74,162,0.22);
}
.mega-product__cart img{
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

@media (max-width: 1199.98px){
  .mega::before{ top: 96px; }
  .mega__panel{ margin-top: 96px; padding-inline: 10px; }
  .mega__grid{ grid-template-columns: 1fr; }
  .mega__grid.mega__grid--without-products{ grid-template-columns: 1fr; }
  .mega__subs{ display: none; }
  .mega__side{ display: none; }
  .mega__grid{ max-height: calc(100vh - 132px); min-height: unset; }

  /* The active row is a tab that bleeds into the subs panel on desktop; there is
     no such panel here, so drop the 18px connector and keep it the same width as
     the rest. */
  .mega-cat.is-active{
    border-radius: 13px;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.98);
  }
  .mega-cat.is-active::after{ display: none; }

  /* Mobile accordion panels (expand under clicked category) */
  .mega-cat__panel{
    display: block; /* needed for animation */
    max-height: 0;
    opacity: 0;
    transform: translateY(-2px);
    overflow: hidden;
    margin: 0;
    padding: 0 10px 0 54px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.92);
    transition:
      max-height 260ms cubic-bezier(.2,.9,.2,1),
      opacity 200ms ease,
      transform 200ms ease,
      padding 200ms ease,
      margin 200ms ease,
      border-color 200ms ease;
  }
  .mega-cat[aria-expanded="true"] + .mega-cat__panel{
    max-height: none;
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
    margin: -2px 0 6px;
    padding: 8px 0 0;
    border-color: transparent;
    background: transparent;
  }
  .mega-cat__panel > .mega__side{
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
  }
  .mega-cat__panel > .mega__side[hidden]{
    display: none;
  }
  .mega-cat__panel .mega-card{
    padding: 14px 20px 16px;
    border-radius: 20px;
    box-shadow: none;
  }
  .mega-cat__panel .mega-card__title{
    margin: 0 0 10px;
    padding: 0 6px 10px;
    border-bottom: 1px solid #d4dce8;
    font-size: 11px;
    line-height: 1.25;
  }
  .mega-cat__panel .mega-card__products{
    gap: 12px;
  }
  .mega-cat__panel .mega-card__products .mega-product + .mega-product{
    padding-top: 12px;
  }
  .mega-cat__panel .mega-product{
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
  }
  .mega-cat__panel .mega-product__img{
    max-width: 76px;
  }
  .mega-cat__panel .mega-product__name{
    font-size: 13px;
    line-height: 1.35;
    font-weight: 400;
    color: #000;
  }
  .mega-cat__panel .mega-product__old-price{
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.2;
  }
  .mega-cat__panel .mega-product__price{
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.15;
  }
  .mega-cat__panel .mega-product__cart{
    display: none;
  }
  .mega-cat__panel .mega__list{
    gap: 0;
  }
  .mega-cat__panel .mega__list li{
    border-bottom: 1px solid rgba(255,255,255,0.95);
  }
  .mega-cat__panel .mega__list a{
    display: block;
    position: relative;
    width: 100%;
    padding: 11px 16px 11px 34px;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 400;
    color: #000;
  }
  .mega-cat__panel .mega__list a::before{
    content: "\00b7";
    position: absolute;
    left: 20px;
    top: 11px;
    color: #000;
  }

  /* The chevron is the accordion toggle (the rest of the row navigates to the
     category), so give it a full 44px touch target. Negative margins keep it
     from growing the row. */
  .mega-cat__chev{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -8px -6px -8px 0;
    font-size: 22px;
    transition: transform 200ms ease;
  }
  .mega-cat__chev:not(.mega-cat__chev--has-children){
    display: none;
  }
  .mega-cat[aria-expanded="true"] .mega-cat__chev{
    transform: rotate(90deg);
  }

  .actions .user-nav{ gap: 8px; }
}

@media (min-width: 769px) and (max-width: 1199.98px){
  .mega-cat__panel .mega-product{
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 18px;
  }
  .mega-cat__panel .mega-product__img{
    max-width: 110px;
  }
}

@media (min-width: 769px) and (max-width: 1199.98px){
  .mega-cat__panel .mega-product{
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 18px;
  }
  .mega-cat__panel .mega-product__img{
    max-width: 110px;
  }
}

@media (max-width: 768px){
  .mega{
    overflow-x: hidden;
  }
  /* Full-screen menu (opened from the burger or the bottom tabbar): it covers
     the header, so it carries its own top bar with the close button. */
  .mega.mega--fullscreen::before{
    top: 0;
  }
  .mega.mega--fullscreen .mega__panel{
    margin-top: 0;
  }
  .mega.mega--fullscreen .mega__grid{
    /* 65px tabbar + 66px own bar (42px button + 12px above and below) */
    max-height: calc(100vh - 65px - 66px - env(safe-area-inset-bottom));
  }
  .mega--fullscreen .mega__bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 26px left = .mega__cats padding (16px) + .mega-cat padding (10px), so the
       title lines up with the category icons below it. */
    padding: 12px 16px 12px 26px;
    background: #edf0f5;
  }
  .mega--fullscreen .mega__bar-title{
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    color: var(--primary);
  }
  /* Same solid blue circle as the header burger it replaces. */
  .mega--fullscreen .mega__close{
    display: grid;
    position: static;
    width: 42px;
    height: 42px;
    margin-right: -4px;
    border: none;
    background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
    backdrop-filter: none;
    color: #fff;
    font-size: 24px;
    line-height: 1;
  }
  .mega__panel{ padding-inline: 0; }
  .mega__panel .container{
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }
  .mega__wrap::before{
    left: 0;
    right: 0;
  }
  .mega__close{
    right: 12px;
  }
  .mega__grid{
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    overflow-x: hidden;
  }
}

@media (min-width: 1025px){
  .mega__subs .mega__list--two-col{
    align-content: start;
  }
}

@media (prefers-reduced-motion: reduce){
  .mega{ transition: none !important; }
  .mega__panel{ transition: none !important; transform: none !important; }
  .mega__subs{ transition: none !important; }
  .mega-cat__panel{ transition: none !important; }
}

@media (min-width: 1400px) {
  .container,
  .wrapper {
    width: min(var(--container), calc(100% - 32px));
    max-width: var(--container);
  }
}

/* ===================== BRANDS (alphabet index) ===================== */

.brands-alphabet-nav > .d-flex{
  justify-content: center;
}

.brands-alphabet-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  color: #555555;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.brands-alphabet-nav__link:hover,
.brands-alphabet-nav__link:focus {
  color: #ffffff;
  background-color: #555555;
  text-decoration: none;
}

.brands-section {
  margin-top: 28px;
  scroll-margin-top: 120px;
}
.brands-section__title {
  margin: 0 0 14px;
  color: #111111;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.brand-card {
  perspective: 900px;
}
.brand-card__link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* overflow: hidden intentionally omitted it breaks transform-style: preserve-3d */
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(19, 36, 64, 0.04);
  transform-style: preserve-3d;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.4s ease;
}
.brand-card__link:hover,
.brand-card__link:focus {
  border-color: #e6eaf0;
  box-shadow: 0 10px 22px rgba(19, 36, 64, 0.08);
  transform: rotateY(180deg);
}

/* Front face logo */
.brand-card__img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 68%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  backface-visibility: hidden;
  transform: translate(-50%, -50%);
}

/* Back face pseudo-elements are pre-rotated 180deg so they face front after the flip */
.brand-card__link::before,
.brand-card__link::after {
  position: absolute;
  pointer-events: none;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.brand-card__link::before {
  content: attr(aria-label);
  top: 22px;
  right: 20px;
  left: 20px;
  color: #111111;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}
.brand-card__link::after {
  content: attr(data-more);
  bottom: 22px;
  left: 20px;
  display: inline-block;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  background: #ff0043;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .brand-card__link,
  .brand-card__link::before,
  .brand-card__link::after {
    transition: none;
  }
}

/* ===================== КАРТА НА САЙТА (sitemap) =====================
   Пренесено от main.css; цветовете заменени с палитрата на сайта. */
.sitem{ font-size: 16px; margin-bottom: 30px; }
.sitemap__list{ list-style: none; margin: 0; padding: 0; }
.sitemap__list .sitemap__list,
.sitemap__list .sitemap__list .sitemap__list-item{ padding-left: 1em; }
.sitemap__list-item{ position: relative; padding-bottom: 1em; }
.sitemap__list-item:last-child{ padding-bottom: 0; }
.sitemap__list .sitemap__list .sitemap__list-item:before{ content: ""; position: absolute; left: -.5em; top: .625em; width: 1em; height: 1px; background: var(--primary-2); }
.sitemap__list .sitemap__list .sitemap__list-item:after{ content: ""; position: absolute; top: 0; left: -.5em; bottom: 0; width: 1px; background: var(--primary); }
.sitemap__list .sitemap__list .sitemap__list-item:first-child{ padding-top: 1em; }
.sitemap__list .sitemap__list .sitemap__list-item:first-child:before{ top: 1.625em; }
.sitemap__list .sitemap__list .sitemap__list-item:first-child:after{ top: .625em; }
.sitemap__list .sitemap__list .sitemap__list-item:last-child:after{ bottom: auto; height: .625em; }
.sitemap__list-link{ display: inline-block; font-size: 1em; line-height: 1; color: var(--text); text-decoration: none; transition: color ease-out .4s; }
.sitemap__list-link--large{ font-weight: 500; font-size: 1.125em; }
.sitemap__list-link--small{ font-size: .875em; color: var(--muted); }
.sitemap__list-link:hover{ color: var(--primary); }

/* ===================== HEALTH CARE ARTICLE GRID ===================== */
.hc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}
.hc-grid .news-item{
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(15,23,42,0.10);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hc-grid .news-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(15,23,42,0.15);
}
.hc-grid .news-item__link{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding-bottom: 0;
  border-radius: var(--radius);
}
.hc-grid .post-card__img .aspect-ratio{ height: 300px; }
.hc-grid .post-card__img .aspect-ratio::before{ padding-bottom: 0; }
.hc-grid .post-card__img img{
  height: 300px;
  object-fit: cover;
}
.hc-grid .post-card__body{
  background: #edf1f6;
  padding: 16px 16px 50px;
  flex: 1;
}
.hc-grid .news-item__title{
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #09347b;
  padding: 0;
  margin-bottom: 8px;
}
.hc-grid .news-item__title::before{
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 8px;
  align-self: flex-start;
  background: var(--success);
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-top: 6px;
  margin-left: -16px;
}
.hc-grid .news-item__date{
  font-size: 13px;
  color: var(--muted-2);
  font-weight: 500;
  margin: 0;
  margin-left: 15px;
}

.hc-grid--news .news-item__title::before{
  background: var(--primary);
}

@media (max-width: 1024px){
  .hc-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .hc-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .hc-grid{ gap: 15px; }
  .hc-grid .post-card__img .aspect-ratio{ height: 180px; }
  .hc-grid .post-card__img .aspect-ratio::before{ padding-bottom: 0; }
  .hc-grid .post-card__img img{ height: 180px; }
  .hc-grid .post-card__body{ padding: 14px 20px 18px; }
  .hc-grid .news-item__title{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
  .hc-grid .news-item__date{ font-size: 14px; }
}

/* ===================== NEWS FILTER FORM ===================== */
.news-filter{
  background: #edf1f6;
  border-radius: .5rem;
  padding: 12px 24px;
}
.news-filter__toggle{ display: none; }
.news-filter__body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.news-filter__field{
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 767.98px){
  .news-filter{ background: #e4ebf2; padding: 0; margin-bottom: 12px; }
  .news-filter__toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    background: #e4ebf2;
    border-radius: 20px;
    color: #09347b;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
  }
  .news-filter__toggle-input:focus-visible ~ .news-filter__toggle{
    outline: 2px solid #09347b;
    outline-offset: 2px;
  }
  .news-filter__body{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-height: 0;
    margin-top: 0;
    padding: 0 15px;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease, padding-bottom .35s ease;
  }
  .news-filter__toggle-input:checked ~ .news-filter__body{
    max-height: 320px;
    margin-top: 12px;
    padding-bottom: 15px;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce){
  .news-filter__body{ transition: none; }
}
.news-filter__label{
  font-size: var(--fs-13);
  color: #555555;
}
.news-filter__select{
  border-color: var(--line);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  padding-top: 5px;
  padding-bottom: 4px;
  background-image:
    linear-gradient(#d7d7d7, #d7d7d7),
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23585858' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-position:
    right 2.45rem center,
    right 1rem center;
  background-size:
    1px 22px,
    12px 12px;
}
.brands-filter-form{
  align-items: center;
}
.brands-filter-form__select{
  min-width: 220px;
}
.brands-filter-form__select--sort{
  min-width: 150px;
  color: #09347b;
}
.category-filter-form{
  overflow: hidden;
  border-radius: 8px;
}
.category-filter-form.news-filter{
  background: transparent;
  padding: 0;
}
.category-filter-form__body{
  display: block;
}
.category-filter-form__row{
  padding: 20px;
}
.category-filter-form__row--main{
  background: #e4ebf2;
  border-radius: 8px;
}
.category-filter-form__row--options{
  background: #edf1f6;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 8px;
}
.category-filter-form .news-filter__label{
  font-size: 13px;
  line-height: 1.2;

}

.category-filter-form .news-filter__label {
  color: #555555;
  font-weight: 700;
}
#category-filter-sort.category-filter-form__select--sort {
  color: #09347b;
}

.category-filter-form__row--main > div .news-filter__label {
  color: #555555;
  font-weight: 700;
}

.category-filter-form__select{
  min-width: 142px;
  height: 31px;
  border-color: #ccd5df;
  color: #4a4f55;
  font-size: 13px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 13px;
  box-shadow: none;
}
.category-filter-form__select--sort{
  min-width: 138px;
}
.category-filter-form__reset{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 14px;
  border: 1px solid #ccd5df;
  border-radius: 999px;
  background: #ffffff;
  color: #09347b;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.category-filter-form__reset:hover{
  background: #09347b;
  border-color: #09347b;
  color: #ffffff;
}
.category-filter-form__reset:focus-visible{
  outline: 2px solid #09347b;
  outline-offset: 2px;
}
.category-filter-form__reset[hidden]{
  display: none;
}
.category-filter-form__reset-icon{
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
}
/* Когато няма подкатегории (единствената опция е placeholder-ът "Няма намерени
   подкатегории"), текстът е по-дълъг. Резервираме padding-right отдясно, за да не
   влиза текстът в сивата чертичка-разделител (на right 2.45rem), и малко повече
   ширина, за да се побере целият низ. */
.category-filter-form__select:has(> option:only-child){
  min-width: 230px;
  padding-right: 3rem;
}
.category-filter-form .form-check{
  min-height: 18px;
  padding-left: 18px;
}
.category-filter-form .form-check-input{
  width: 12px;
  height: 12px;
  margin-top: 3px;
  margin-left: -18px;
  border-color: #c9d2dc;
  background-color: #ffffff;
  box-shadow: none;
  border-radius: 50% !important;
}
.category-filter-form .form-check-input:checked{
  background-color: #003b85;
  border-color: #003b85;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.category-filter-form .form-check-input:focus{
  border-color: #003b85;
  box-shadow: 0 0 0 2px rgba(0, 59, 133, .16);
}
.category-filter-form .form-check-label{
  display: inline-block;
  padding-top: 0;
}
@media (max-width: 767.98px){
  .category-filter-form.news-filter{
    background: #e4ebf2;
    border-radius: 20px;
    margin-bottom: 12px !important;
  }
  .category-filter-form .category-filter-form__body{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
  }
  .category-filter-form .news-filter__toggle-input:checked ~ .category-filter-form__body{
    max-height: 980px;
    padding-bottom: 0;
  }
  .category-filter-form__row{
    padding: 12px 15px;
  }
  .category-filter-form__row--main,
  .category-filter-form__row--options{
    flex-direction: column;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .category-filter-form__row > .d-flex{
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .category-filter-form .news-filter__label{
    width: auto;
    text-align: left;
  }
  .category-filter-form__select,
  .category-filter-form__select--sort{
    width: 100%;
    min-width: 0;
    height: 40px;
  }
  .category-filter-form__reset{
    width: 100%;
    height: 40px;
    justify-content: center;
  }
  .category-filter-form__row--main,
  .category-filter-form__row--options{
    border-radius: 0;
  }
  .category-filter-form .form-check{
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 20px;
    padding-left: 0;
  }
  .category-filter-form .form-check-input{
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    margin-left: 0;
    margin-right: 8px;
  }
  .category-filter-form .form-check-label{
    width: auto;
    text-align: left;
    line-height: 1.25;
  }
  .category-filter-form__row--options > .ms-sm-auto{
    margin-left: 0 !important;
  }
  .category-filter-form__row--options{
    margin-top: 0 !important;
  }
}
#category_with_filters .product-filters:not(.product-filters--alt),
#category_with_filters .product-filters--alt .products-wrapper,
#category_with_filters .product-filters--alt .products-layout__aside{
  display: none;
}

/* section#category_with_filters {
  padding-bottom: 0;;
} */

/* ===================== CATEGORY PRODUCT LIST ===================== */
#category_with_filters {
  padding-top: 15px;
}
#category_with_filters .product-list{
  display: grid;
  /* Fluid грид: auto-fill избира броя колони спрямо контейнера, картата е
     между 260–282px (cap 282) → никога не прелива. При макс. ширина (1558px)
     дава 5×282 (идентично на предишния фиксиран дизайн). */
  grid-template-columns: repeat(auto-fill, minmax(260px, 282px));
  justify-content: center;
  gap: 36px;
  align-items: stretch;
}
#category_with_filters .product-list__item{
  min-width: 0;
}
#category_with_filters .product-list__item--promotion{
  grid-column: span 2;
  aspect-ratio: 600 / 450;
  height: auto;
}
#category_with_filters .promotion,
#category_with_filters .promotion__slider,
#category_with_filters .promotion__slider .slider,
#category_with_filters .promotion__slider .swiper-container,
#category_with_filters .promotion__slider .swiper-wrapper,
#category_with_filters .promotion__slider .swiper-slide,
#category_with_filters .promotion__slider a,
#category_with_filters .promotion-card{
  height: 100%;
}
#category_with_filters .promotion{
  overflow: hidden;
  border: 1px solid #d9dfe6;
  border-radius: 16px;
  background: #ffffff;
}
#category_with_filters .promotion__title,
#category_with_filters .promotion-card__body,
#category_with_filters .promotion__slider .slider__buttons{
  display: none;
}
#category_with_filters .promotion__slider a{
  display: block;
}
#category_with_filters .promotion-card{
  display: block;
  min-height: 0;
}
#category_with_filters .promotion-card__preview{
  height: 100%;
  background: #e8eef5;
}
#category_with_filters .promotion-card__preview::before,
#category_with_filters .promotion-card__preview::after{
  display: none;
}
#category_with_filters .promotion-card__preview img{
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#category_with_filters .product-list__item:not(.product-list__item--promotion) .product-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  height: 451px;
  padding: 30px 18px 80px;
  border: 1px solid #e9e1d5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 24px rgba(38, 46, 57, 0.13);
  text-align: center;
  transition: box-shadow 0.25s ease;
}
#category_with_filters .product-list__item:not(.product-list__item--promotion) .product-card:hover{
  box-shadow: 0 0 0 rgba(38, 46, 57, 0);
}
#category_with_filters .product-card__labels{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 58px);
}
#category_with_filters .product-card__label{
  display: inline-flex;
  align-items: center;
  min-height: 0;
  height: 22px;
  padding: 3px 13px;
  border-radius: 999px;
  background: #7fbd81;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
#category_with_filters .product-card__label--new{
  background: #91bd88;
}
#category_with_filters .product-card__label--discount,
#category_with_filters .product-card__label--promo,
#category_with_filters .product-card__label--special-price{
  background: #f0212d;
}
#category_with_filters .product-card__label--discount1{
  background: #df5d67;
}
#category_with_filters .product-card__label--gift,
#category_with_filters .product-card__label--best-selling,
#category_with_filters .product-card__label--best-seller,
#category_with_filters .product-card__label--hit{
  background: #f6b86f;
}
#category_with_filters .product-card__label--gift{
  background: #5072a1;
}
#category_with_filters .product-card__button{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
#category_with_filters .product-card__button--favorites{
  position: absolute;
  top: 17px;
  right: 17px;
  z-index: 2;
  width: 22px;
  height: 22px;
  color: #e9e1d5;
}
#category_with_filters .product-card__button--favorites.is-active{
  color: #ff0000;
}
#category_with_filters .product-card__button-icon{
  width: 100%;
  height: 100%;
  fill: currentColor;
}
#category_with_filters .product-card__button-icon-fill{
  display: none;
}
#category_with_filters .product-card__button--favorites.is-active .product-card__button-icon-outline{
  display: none;
}
#category_with_filters .product-card__button--favorites.is-active .product-card__button-icon-fill{
  display: block;
}
#category_with_filters .product-card__preview{
  order: 1;
  width: 100%;
  max-width: 170px;
  margin: 56px auto 12px;
  background: transparent;
}
#category_with_filters .product-card__preview a{
  display: block;
  width: 100%;
  height: 100%;
}
#category_with_filters .product-card__preview img{
  fill: #ffffff;
}
#category_with_filters .label-recommended-by-d{
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: auto;
  margin: 0 auto 8px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: #f3f6fb;
  color: #232323;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
}
#category_with_filters .label-recommended-by-d picture{
  flex: 0 0 20px;
  max-width: 20px;
}
#category_with_filters .label-recommended-by-d picture img{
  width: 100%;
  height: auto;
}
#category_with_filters .label-recommended-by-d strong{
  font-size: 11px;
  font-weight: 600;
}
#category_with_filters .product-card__text{
  order: 3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 45px;
  margin: 0 0 4px;
  color: #000;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
  text-transform: uppercase;
}
#category_with_filters .product-card__text-link{
  color: #000;
}
@media (min-width: 576px){
  #category_with_filters .product-list__item:not(.product-list__item--promotion) .product-card__text{
    flex-shrink: 0;
  }
}
/* "Продукт с изтичащ срок" note above the product name (outlet products) */
.product-card__expiring{
  color: #ff0000;
  font-size: 13px;
  font-weight: 400;
}
/* Place it above the name in the flex-ordered listing card (not at the top) */
#category_with_filters .product-card__expiring{
  order: 2;
  margin: 0 0 4px;
}
#category_with_filters .product-card__old-price{
  order: 5;
  min-height: 17px;
  margin: 0;
  color: #6f7d90;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: line-through;
}
#category_with_filters .product-card__prices{
  order: 6;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 14px;
  color: #09347b;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
}
#category_with_filters .product-card__prices--old{
  margin: 0;
  color: #09347b;
  font-size: 13px !important/*  */;
  text-decoration: line-through;
}
#category_with_filters .product-card__prices-title{
  display: none;
}
#category_with_filters .product-card__prices-sep{
  color: inherit;
  text-decoration: none;
}
#category_with_filters .product-card__price{
  color: #09347b;
  font: inherit;
}
#category_with_filters .product-card__prices--discounted .product-card__price{
  color: #ff0000;
}
#category_with_filters .product-card:has(.product-card__label--discount) > .product-card__prices:not(.product-card__prices--old),
#category_with_filters .product-card:has(.product-card__label--discount1) > .product-card__prices:not(.product-card__prices--old){
  color: #ff0000;
}
#category_with_filters .product-card:has(.product-card__label--discount) > .product-card__prices:not(.product-card__prices--old) .product-card__price,
#category_with_filters .product-card:has(.product-card__label--discount1) > .product-card__prices:not(.product-card__prices--old) .product-card__price{
  color: #ff0000;
}
#category_with_filters .product-card__price:has(+ .product-card__old-price),
#category_with_filters .product-card__price[style*="red"]{
  color: #ff001f;
}
/* Out-of-stock / by-prescription status: small red note above the product name */
#category_with_filters .product-card__price[style*="red"]{
  order: 2;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: #ff0000;
}
#category_with_filters .product-card__delayed-delivery,
.favourites-page .product-card__delayed-delivery{
  order: 2;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: #ff0000;
}
#category_with_filters .product-card > br{
  display: none;
}
#category_with_filters .product-card__buttons{
  order: 7;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  margin-top: 0;
}
#category_with_filters .product-card__button--compare{
  display: none;
}
#category_with_filters .product-card__button--cart{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: url("../images-new/icons/icons_bg.png") center / cover no-repeat;
  color: #ffffff;
  filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, 0.28));
  box-shadow: none;
}
#category_with_filters .product-card__button--cart::before{
  content: "";
  width: 24px;
  height: 24px;
  background: url("../images-new/icons/cart_icon.png") center / contain no-repeat;
  /* transform: translate(-2px, -1px); */
}
#category_with_filters .product-card__button--cart .product-card__button-icon{
  opacity: 0;
  position: absolute;
}
@media (max-width: 575.98px){
  .news-filter > .d-flex{
    width: 100%;
  }
  .news-filter__label{
    width: 100%;
    text-align: center;
  }
  .news-filter__select{
    width: 100%;
  }
  .brands-filter-form__select{
    min-width: 0;
  }
  .category-filter-form__row{
    padding: 12px;
  }
  .category-filter-form__select,
  .category-filter-form__select--sort{
    min-width: 0;
  }
}
@media (max-width: 767.98px){
  #category_with_filters .product-list{
    grid-template-columns: repeat(2, minmax(0, 282px));
    gap: 22px;
  }
  /* Figma (мобилно): сива заоблена подложка зад продуктовия списък,
     с вътрешен отстъп, за да не опират картите до ръба ѝ. */
  #category_with_filters .products-layout__content{
    background: #f8f8f8;
    border-radius: 16px;
    padding: 8px;
    box-sizing: border-box;
  }
}
@media (max-width: 349.98px){
  #category_with_filters .product-list{
    grid-template-columns: 1fr;
  }
  #category_with_filters .product-list__item--promotion{
    grid-column: auto;
    aspect-ratio: 600 / 450;
    height: auto;
  }
  #category_with_filters .promotion-card{
    min-height: 0;
  }
}
@media (min-width: 350px) and (max-width: 575.98px){
  /* Figma mobile 2-up: 2 равни карти, само 7px gap */
  #category_with_filters .product-list{
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }
}
@media (max-width: 575.98px){
  /* Равни височини по реда (както в стария main.css): grid align-items:stretch
     разтяга клетките до най-високата карта, картата запълва клетката с
     min-height:100%. Без фиксирана височина → нищо не се реже при "Очаква
     доставка", забавена доставка, inline лейбъл. min-height:400px е само под. */
  #category_with_filters .product-list__item:not(.product-list__item--promotion){
    min-height: 400px;
  }
  #category_with_filters .product-list__item:not(.product-list__item--promotion) .product-card{
    height: auto;
    min-height: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  #category_with_filters .product-card__prices--old {
    font-size: 12px;
  }

  #category_with_filters .product-card__prices{
    font-size: 18px;
    margin-bottom: 10px;
  }
  /* заглавие → Figma 12px */
  #category_with_filters .product-card__text{
    font-size: 12px;
  }

  #category_with_filters .product-card__label{
    height: auto;
    min-height: 18px;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.2;
  }
}

.locations{
  position: relative;
  scroll-margin-top: 118px;
  margin-bottom: 120px;
}
.locations__map-layout{
  align-items: stretch;
  background: #edf3f9;
  border-radius: 6px;
}
.locations__sidebar-column,
.locations__map-column{
  min-width: 0;
}
.locations__sidebar-column{
  display: flex;
}
.locations__map-column{
  display: flex;
  padding: 34px 34px 34px 0;
}
.locations__map{
  width: 100%;
  height: 554px;
  min-height: 554px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid #d7d7d7;
  background: #e7edf5;
}
.locations .cities-list{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 13px;
  margin: 16px 0 0;
  padding: 16px;
  list-style: none;
  background: #f8f8f8;
  border-radius: var(--radius-sm);
}
.locations .cities-list__item{
  min-width: 0;
}
.locations .filter-radio{
  display: block;
  width: 100%;
  margin: 0;
}
.locations .filter-radio__input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.locations .filter-radio__element{
  display: flex;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  background: #edf1f6;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.locations .filter-radio__element:hover{
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 8px 16px rgba(1, 83, 148, 0.16);
}
.locations .filter-radio__input:checked + .filter-radio__element{
  color: var(--primary);
  background: #d1dde8;
  border-color: #d1dde8;
  box-shadow: 0 8px 16px rgba(1, 83, 148, 0.16);
}
.locations .filter-radio__input:focus + .filter-radio__element{
  border-color: rgba(1, 83, 148, 0.35);
}
.locations-form{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 588px;
  min-height: 588px;
  margin: 0;
  padding: 34px 34px 0px;
  background: #edf1f6;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow: none;
  overflow: hidden;
}
.locations-form__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.locations-form__title{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.locations-form .form__group{
  margin: 0;
}
.locations-form .form__label{
  display: none;
  margin-bottom: 8px;
  color: #555555;
  font-size: 13px;
}
.locations-form .form__control{
  width: 100%;
  height: 36px;
  background-color: #fff;
  font-size: 12px;
  border: 1px solid #cccccc;
}
.locations-form .form__control:hover{
  background: #fff;
}
.locations-form .ss-main{
  position: relative;
  z-index: 5;
}
.locations-form .ss-content{
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform-origin: center top !important;
}
.locations-form .ss-content.ss-open{
  height: auto !important;
  margin: 3px 0 0 !important;
  transform: scaleY(1) !important;
}
.locations-form .ss-single-selected.ss-open-above,
.locations-form .ss-single-selected.ss-open-below{
  border-radius: 4px 4px 0 0;
}
.locations__nearest{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 14px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  background: var(--primary);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(1, 83, 148, 0.18);
  cursor: pointer;
  transition: opacity .2s ease, filter .2s ease;
}
.locations__nearest::before{
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: url('../images-new/icons/apteki_icon.png') center / contain no-repeat;
  padding: 14px;
}
.locations__nearest.button--sub{
  color: #ffffff;
  background: url('../images-new/finish_order.png') center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
  text-transform: uppercase;
}
.locations__nearest--mobile{
  display: none;
}
.locations__nearest:hover,
.locations__nearest:focus{
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}
.locations__nearest:disabled,
.locations__nearest.is-locating{
  opacity: .7;
  cursor: wait;
}
.locations-form > .form__group + .locations__nearest{
  width: 100%;
  margin-top: 10px;
}
.locations-sidebar-list{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  margin-top: 10px;
  overflow-y: auto;
  padding-right: 6px;
  background-color: #fff;
  padding: 20px;
  border-radius: var( --radius-sm );
}
.locations-sidebar-list::-webkit-scrollbar{
  width: 6px;
}
.locations-sidebar-list::-webkit-scrollbar-track{
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
}
.locations-sidebar-list::-webkit-scrollbar-thumb{
  background: rgba(1, 83, 148, 0.45);
  border-radius: 999px;
}
.locations-sidebar-city.hidden{
  display: none;
}
.locations > .js-city.hidden{
  display: none;
}
.locations-sidebar-item{
  padding: 9px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.locations-sidebar-item:first-child{
  border-top: 0;
}
.locations-sidebar-item.is-nearest{
  margin-right: 2px;
  margin-left: -8px;
  padding-right: 8px;
  padding-left: 8px;
  background: rgba(1, 83, 148, 0.08);
  border-radius: 4px;
}
.locations-sidebar-item__title{
  display: block;
  margin-bottom: 5px;
  color: #555555;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.locations-sidebar-item__text{
  display: block;
  color: #555555;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;;
}
.locations-sidebar-item__link{
  display: inline-block;
  margin-top: 5px;
  padding: 0;
  color: #09347b;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.locations > .js-city.pt-l{
  padding-top: 42px;
}
.locations > .js-city.pt-l > .title--md{
  display: flex;
  align-items: center;
  min-height: 49px;
  margin: 0 0 18px;
  padding: 16px 30px;
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  background: #f8f8f8;
  border-radius: var(--radius-sm);
}
.locations .locations-list{
  margin: 0 0 16px;
}
.locations .locations-list__row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #ffffff;
}
.locations .locations-list__row:nth-child(even){
  background: #f8f8f8;
  border-radius: var(--radius-sm);
}
.locations .locations-list__item{
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.locations .location{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  height: 100%;
  padding: 40px;
  color: #000;
  background: transparent;
  border: 0;
}
.locations .location__top{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.locations .location__title{
  margin: 0 0 3px;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.locations .location__text{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #000;
  font-size: 14px;
  line-height: 1.45;
}
.locations .location__text .icon{
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: var(--primary);
  fill: currentColor;
}
.locations .location__icon{
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.locations .location__button{
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.locations-list__item.is-nearest .location{
  outline: 2px solid rgba(1, 83, 148, 0.18);
  outline-offset: 4px;
}

.locations .ss-main .ss-single-selected {
  border: 0;
}

/* Click & Collect modal (pharmacy picker) — sidebar list reuses the same
   .locations-sidebar-item* classes/styles as the "Аптеки" page; only the
   modal chrome (.block-map*, .modal--map) needed dedicated CSS below. */
/* .modal's z-index: 9999999999 is outside the valid 32-bit CSS <integer>
   range, so some browsers drop it as invalid (effectively z-index: auto) —
   that lets the fixed .mobile-search-float (z-index: 70) render on top of
   this modal on mobile. Reassert a valid, still-effectively-max z-index,
   scoped to this modal only. */
.modal--map.is-open{
  z-index: 2147483647;
}
/* .modal__cont has its own transform, which makes it a new stacking context
   for its children (incl. .modal__close) — so raising z-index on the outer
   .modal--map alone isn't guaranteed to lift a descendant that already sits
   in that nested context. Reassert directly on the button too. */
.modal--map .modal__close{
  z-index: 2147483647 !important;
}
.modal--map .modal__box{
  max-width: 1220px;
  width: 100%;
}
.modal--map .modal__cont{
  padding-inline: 20px;
  padding-bottom: 40px;
  overflow: auto;
  min-height: 100dvh;
  border-radius: 0;
  background-color: #edf1f6;
}

.modal--map .modal__title{
  font-size: clamp(18px, 2.2vw, 26px);
}

.modal--map .modal__cont .text--list-data h2{
  font-size: 17px;
  text-align: center;
  color: var(--success);
}
.modal--map .modal__cont .text--list-data .buttons-row{
  display: flex;
  justify-content: center;
}
.modal--map .modal__cont .text--list-data .buttons-row .button--100{
  width: auto;
  flex: 0 0 auto;
  max-width: 320px;
}

.modal--map .block-map__wrapper h3{
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.modal--map .modal__cont .button--sm{
  height: 42px;
  padding: 0 18px;
  font-size: var(--fs-12);
}
/* Glossy button PNG used site-wide (auth-page, checkout-page, mini-basket...) */
.modal--map .modal__cont .button{
  background: url('../images-new/finish_order.png') center / 100% 100% no-repeat;
  color: #fff;
  border: 0;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
/* "Виж резервационната кошница" — same see_more_bg.png used by
   #cart-page .basket-button-row .button:not(.button--sub) and
   .related-products--actual .related-products__cta. */
.modal--map .modal__cont .button--sm{
  background: url('../images-new/icons/see_more_bg.png') center / 100% 100% no-repeat;
  color: #fff;
  filter: none;
}
/* "Провери за цена" trigger — short single-line label, compact pill. */
.modal--map .modal__cont .js-check-pharmacy-item-click-and-collect{
  height: 34px;
  padding: 0 18px;
  font-size: 11px;
}
/* "Резервирай за ..." result button — icon + price, needs room to wrap.
   Flat pill (like #cart-page .basket-button-row .button--sub) instead of the
   glossy PNG, since that background stretches badly on a taller 2-line box. */
.modal--map .modal__cont .product__info-btns-add{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: auto;
  min-height: 40px;
  padding: 8px 14px;
  background: #edf1f6;
  color: #09347b;
  border: 0;
  filter: none;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  border-radius: 999px;
}
.modal--map .modal__cont .product__info-btns-add .user-nav__link-icon{
  width: 18px;
  height: 18px;
}
.modal--map .locations__map{
  margin-bottom: 0;
  height: 45dvh;
}
.modal--map .block-map{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.modal--map .block-map__wrapper-scroll{
  flex-direction: column;
  overflow: auto;
  height: calc(100dvh - 70px);
  border-radius: 20px;
}
.modal--map .block-map__aside{
  height: 50dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}
.modal--map .block-map__aside::-webkit-scrollbar{ height: 4px; width: 4px; }
.modal--map .block-map__aside::-webkit-scrollbar-track{ background-color: transparent; }
.modal--map .block-map__aside::-webkit-scrollbar-thumb,
.modal--map .block-map__aside::-webkit-scrollbar-thumb:active,
.modal--map .block-map__aside::-webkit-scrollbar-thumb:hover{ background-color: var(--primary); }
.modal--map .block-map__aside::-webkit-scrollbar-button{ display: none; }
.modal--map .block-map__wrap-map{ height: 45dvh; }
.block-map__wrapper{ overflow: hidden; }
.block-map__wrapper-scroll{ display: flex; }
.block-map__wrap-map .locations__map{ border-radius: 20px; }
.block-map__wrap-map .gm-style-iw-ch{ padding-top: 0 !important; }
.block-map__wrap-map .gm-ui-hover-effect{ margin: 12px 12px 0 !important; width: 24px !important; height: 24px !important; }
.block-map__wrap-map .gm-ui-hover-effect span{ margin: 0 !important; }
.block-map__wrap-map .location__title{ margin-bottom: 12px; }
.block-map__wrap-map .location-infowindow{ padding: 4px; }
.block-map__aside{
  width: 100%;
  height: 25dvh;
  padding: 0 12px 12px;
  border-radius: 20px 20px 0 0;
}
.block-map__list-content{
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #fff;
  border-radius: var(--radius-sm);
}
.js-map-location-modal .locations-sidebar-item:has(.locations-sidebar-item__link.is-active){
  background-color: rgba(1, 83, 148, .08);
}
/* Force vertical stacking (name / link / button) regardless of any inherited
   inline-flow context, since this markup sits inside a flex list item. */
.js-map-location-modal .locations-sidebar-item{
  display: block;
}
.js-map-location-modal .locations-sidebar-item__title,
.js-map-location-modal .locations-sidebar-item__link{
  display: block;
}
.js-map-location-modal .js-pharmacy-item-holder{
  display: block;
  margin-top: 8px;
}

@media (min-width: 480px){
  .block-map__aside{ height: 20dvh; }
}
@media (min-width: 768px){
  .modal--map .modal__cont{ max-height: 80dvh; min-height: initial; border-radius: 20px; }
  .modal--map .block-map__wrapper-scroll{ flex-direction: row; height: initial; overflow: hidden; }
  .modal--map .block-map__aside{ height: calc(60dvh); }
  .modal--map .block-map__wrap-map,
  .modal--map .locations__map{ height: 60dvh; }
  .block-map__wrap-map{ width: calc(100% - 210px); }
  .block-map__wrap-map .location-infowindow{ padding: 10px; }
  .block-map__aside{ border-radius: 20px 0 0 20px; max-width: 210px; height: initial; }
}
@media (min-width: 1200px){
  .block-map__wrap-map{ width: calc(100% - 310px); }
  .block-map__aside{ max-width: 310px; }
}

@media (max-width: 1199.98px){
  .locations .cities-list{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px){
  .locations__map-column{
    padding: 0 14px 14px;
  }
  .locations__map{
    height: 593px;
    min-height: 593px;
    border-radius: var(--radius-sm);
  }
  .locations-form{
    height: auto;
    min-height: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
  .locations-sidebar-list{
    height: auto;
    max-height: 300px;
  }
  .locations .cities-list{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .locations .locations-list{
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .locations .locations-list__row{
    display: contents;
    background: transparent;
  }
  .locations .locations-list__row:nth-child(even){
    background: transparent;
  }
  .locations .locations-list__row:nth-child(4n+1) .locations-list__item:nth-child(-n+2),
  .locations .locations-list__row:nth-child(4n+2) .locations-list__item:nth-child(n+2),
  .locations .locations-list__row:nth-child(4n+3) .locations-list__item:nth-child(3),
  .locations .locations-list__row:nth-child(4n+4) .locations-list__item:nth-child(1){
    background: #ffffff;
  }
  .locations .locations-list__row:nth-child(4n+1) .locations-list__item:nth-child(3),
  .locations .locations-list__row:nth-child(4n+2) .locations-list__item:nth-child(1),
  .locations .locations-list__row:nth-child(4n+3) .locations-list__item:nth-child(-n+2),
  .locations .locations-list__row:nth-child(4n+4) .locations-list__item:nth-child(n+2){
    background: #f8f8f8;
  }
}
@media (max-width: 767.98px){

  .contacts-form-section .section-arrow-divider--themed {
    margin-top: 30px;
  }

  .locations__map-layout{
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    border-radius: 0;
  }
  .locations__map-column{
    order: 1;
    flex-direction: column;
    align-items: center;
    padding: 5px 5px 24px;
    background: #edf1f6;
    border-radius: var(--radius-sm);
  }
  .locations__sidebar-column{
    order: 2;
  }
  .locations__map{
    height: clamp(390px, 117.44vw, 458px);
    min-height: 0;
  }
  .locations-form{
    padding: 33px 20px 5px;
    background: #f8f8f8;
    border-radius: var(--radius-sm);
    overflow: visible;
  }
  .locations-form__header{
    justify-content: center;
    margin-bottom: 13px;
  }
  .locations-form__title{
    flex: 0 1 auto;
    text-align: center;
  }
  .locations-form__header .locations__nearest{
    display: none;
  }
  .locations-form .form__control{
    height: 40px;
    border-color: #ccd5df;
    color: #4a4f55;
    font-size: 13px;
    box-shadow: none;
  }
  .locations-form .ss-main.form__control{
    padding: 0;
    border: 0;
    background: transparent;
  }
  .locations-form .ss-main .ss-single-selected{
    height: 40px;
    padding: 5px 46px 5px 13px;
    background-color: #ffffff;
    border: 1px solid #ccd5df;
    border-radius: 999px;
    box-shadow: none;
  }
  .locations-form .ss-main .ss-single-selected.ss-open-above,
  .locations-form .ss-main .ss-single-selected.ss-open-below{
    border-radius: 999px;
  }
  .locations-form .ss-main .ss-single-selected .placeholder{
    color: #4a4f55;
    font-size: 13px;
    line-height: 1.2;
  }
  .locations-form .ss-main .ss-arrow{
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    margin: 0 !important;
  }
  .locations-form .ss-main .ss-arrow::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    width: 1px;
    height: 28px;
    background: #d7d7d7;
    transform: translateY(-50%);
  }
  .locations-form .ss-main .ss-content{
    top: calc(100% + 6px) !important;
    margin: 0 !important;
    border-color: #ccd5df;
    border-radius: var(--radius-sm);
    z-index: 20;
  }
  .locations-form .ss-main .ss-content.ss-open{
    margin: 0 !important;
  }
  .locations-form .ss-main .ss-content .ss-search{
    padding: 6px 6px 8px;
  }
  .locations-form .ss-main .ss-content .ss-search input{
    height: 32px;
    border-color: #ccd5df;
    border-radius: var(--radius-sm);
  }
  .locations-form .ss-main .ss-content .ss-list{
    max-height: 190px;
    overflow-y: auto;
  }
  .locations__map-column .locations__nearest--mobile{
    display: inline-flex;
    width: 169px;
    min-height: 51px;
    margin: 22px auto 0;
    font-size: 0;
  }
  .locations__map-column .locations__nearest--mobile::after{
    content: "Най-близка";
    font-size: 12px;
  }
  .locations .cities-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    display: none;
  }
  .locations-sidebar-list{
    height: auto;
    max-height: none;
    margin: 12px 0 0;
    overflow: visible;
    padding: 20px;
    border-radius: var(--radius-sm);
  }
  .locations > .js-city.pt-l{
    padding-top: 24px;
  }
  .locations > .js-city.pt-l > .title--md{
    min-height: 38px;
    margin-bottom: 12px;
    padding: 8px 14px;
    font-size: 20px;
  }
  .locations .location{
    min-height: 0;
    padding: 18px 16px 16px;
  }
  .locations .locations-list{
    grid-template-columns: 1fr;
  }
  .locations .locations-list__row{
    display: contents;
    background: transparent;
  }
  .locations .locations-list__row:nth-child(even){
    background: transparent;
  }
  .locations .locations-list__row:nth-child(odd) .locations-list__item:nth-child(odd),
  .locations .locations-list__row:nth-child(even) .locations-list__item:nth-child(even){
    background: #ffffff;
  }
  .locations .locations-list__row:nth-child(odd) .locations-list__item:nth-child(even),
  .locations .locations-list__row:nth-child(even) .locations-list__item:nth-child(odd){
    background: #f8f8f8;
  }

  .locations{
    position: relative;
    scroll-margin-top: 18px;
    margin-bottom: 50px;
  }
}
@media (max-width: 480px){
  .locations-form__header{
    align-items: stretch;
    flex-direction: column;
  }
  .locations-form__header .locations__nearest{
    width: 100%;
  }
  .locations__map-column .locations__nearest--mobile{
    width: 169px;
  }
  .locations .locations-list{
    gap: 8px;
  }
  .locations .location{
    border-radius: 4px;
  }
}


.seo-text-section{ background: #f8f8f8; }
@media (max-width: 767.98px){
  #category_with_filters .seo-text-section{
    margin-inline: 16px;
    border-radius: 16px;
  }
}
.text{
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  color: #555555;
  line-height: 1.7;
}
.text p{
  margin-top: 0;
  margin-bottom: 16px;
}
.text p:last-child{ margin-bottom: 0; }
.text h2{
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 30px;
}
.text a{ color: var(--primary); }
/* START migrated rich text helpers from main.css */
.text h1,
.text h3,
.text h4,
.text h5,
.text h6{
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 20px;
}
.text h1{ font-size: 28px; }
.text h3{ font-size: 20px; }
.text h4{ font-size: 18px; }
.text h5{ font-size: 16px; }
.text h6{ font-size: 14px; }
.text img{
  max-width: 100%;
  height: auto;
}
.text img[style*="float: left"],
.text img[style*="float:left"]{
  max-width: 50%;
  margin: .5em 1em 1em 0;
}
.text img[style*="float: right"],
.text img[style*="float:right"]{
  max-width: 50%;
  margin: .5em 0 1em 1em;
}
.text img,
.text li,
.text ol,
.text ul{
  margin-bottom: 1em;
}
.text ol ol,
.text ol ul,
.text ul ol,
.text ul ul{
  margin-top: 1em;
  padding-left: 1em;
}
.text ol{
  counter-reset: section;
  list-style-type: none;
}
.text ol>li:before{
  counter-increment: section;
  content: counters(section, ".") ".";
  margin-right: .5em;
  color: currentColor;
}
.text blockquote{
  font-size: 150%;
  margin: 2em;
  font-style: italic;
}
.text .blockquote--dark{
  background: #e7ebee;
  margin: 40px 0;
  padding: 2em;
  border-radius: 10px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.47;
  font-style: normal;
}
.text .blockquote__info{
  display: block;
  font-size: 14px;
  line-height: 2;
  font-weight: 400;
  margin-top: 14px;
}
.text table{
  border-collapse: collapse;
  margin-bottom: 1em;
  width: 100%;
  border: 1px solid gray;
}
.text table.table-layout-fixed{ table-layout: fixed; }
.text table.table-width-100{ width: 100%; }
.text table td,
.text table th{
  padding: 1em;
}
.text table th{
  background-color: #d0d0d0;
  text-align: center;
}
.text table td,
.text table th{
  border: 1px solid gray;
}
.text table.product-table-info{
  border: 0;
  width: 940px;
}
.text .no-border{
  border: 0;
}
.text .no-border td,
.text .no-border th{
  border: 0;
  font-size: 16px;
  font-weight: 500;
}
.text .highlight,
.text--lg a{
  color: #ff003b;
}
.text .highlight a{ color: inherit; }
.text a.button{
  color: #fff;
  font-size: 15px;
  border-radius: 35px;
}
.text .button.button--small{ line-height: 1.6 !important; }
.text a.button--sub{ color: #232323; }
.text a.button--sub svg{ stroke: #232323; fill: #232323; }
.text--lg{
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -.86px;
}
.text--lg h2{ margin: 0 0 8px !important; }
.text--list-data ol li,
.text--list-data ul li{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
}
.text--list-circle{
  line-height: 1.5;
}
.text--list-circle ul:not(.check-list)>li{
  padding-left: 20px;
  position: relative;
}
.text--list-circle ul:not(.check-list)>li:before{
  content: "";
  position: absolute;
  left: 0;
  top: .375em;
  width: 10px;
  height: 10px;
  background: 0 0;
  background-color: #ff003b;
  border-radius: 50%;
}
@media screen and (max-width: 1024px){
  .text .no-border td,
  .text .no-border th{
    display: block;
  }
}
@media (max-width: 768px){
  .text img[style*="float: left"],
  .text img[style*="float: right"],
  .text img[style*="float:left"],
  .text img[style*="float:right"]{
    max-width: 100%;
    float: none !important;
    margin: 0 0 1em;
    display: block;
  }
  /* Заглавия в текстов блок спрямо Figma (само размер, стилът остава) */
  .text h2{ font-size: 18px; }
}
@media (max-width: 480px){
  .text--list-data ol li,
  .text--list-data ul li{
    display: block;
  }
}
/* END migrated rich text helpers from main.css */
.text ul:not(.check-list),
.text--list-check ul:not(.check-list){
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.text ul:not(.check-list)>li,
.text--list-check ul:not(.check-list)>li{
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  list-style: none;
}
.text ul:not(.check-list)>li:before,
.text--list-check ul:not(.check-list)>li:before {
    content: "";
    width: 24px;
    height: 17px;
    background-color: #09347b;
    -webkit-mask: url(../images/red-check.svg) no-repeat center center;
    mask: url(../images/red-check.svg) no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    left: 0;
    top: .375em
}
/* Intro card (first paragraph) */
.text__intro{
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 36px;
  margin-bottom: 48px;
}
.text__intro-icon{
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text__intro-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.text__intro-text{
  flex: 1;
}
.text__intro-text p{
  margin: 0;
  font-style: italic;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted);
}

/* Two-column layout */
.text__cols{
  --bs-gutter-x: 4rem;
}
/* SEO text: two auto-balanced columns; the intro card spans both */
.js-seo-text{
  column-count: 2;
  column-gap: 64px;
}
.js-seo-text .text__intro{
  column-span: all;
}
.js-seo-text h2{
  break-after: avoid;
  break-inside: avoid;
}
.js-seo-text p{
  break-inside: avoid;
}
@media (max-width: 767.98px){
  .text__intro{
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .text__cols{
    --bs-gutter-x: 1.5rem;
  }
  .js-seo-text{
    column-count: 1;
  }

  .text__intro-icon {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===================== PAGINATION ===================== */
.pagination{
  display: flex;
  justify-content: center;
  margin: 32px 0 24px;
}
.pagination__list{
  display: inline-flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 30px 0 0 0;
}
.pagination__list li + li:has(.pagination__anchor)::before{
  content: "|";
  color: var(--muted-2);
  padding: 0 4px;
  font-weight: 300;
  font-size: 22px;
}
.pagination__anchor{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #898989;
  font-size: 24px;
  font-weight: 400;
  padding: 4px 8px;
  font-family: var(--font-display);
}
.pagination__anchor.active{
  color: #ff2020;
}
.pagination__anchor:hover:not(.active){
  color: var(--primary);
}
.pagination .visuallyhidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pagination__link{
  padding: 4px 4px;
  font-size: var(--fs-14);
  color: var(--muted);
  font-family: var(--font-display);
}
.pagination__list-last .icon,
.pagination__list-first .icon{
  display: none;
}
.pagination__list-last,
.pagination__list-first{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 18px;
  color: var(--text);
  padding: 4px 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.pagination__list-last::after{
  content: "»";
}
.pagination__list-first::after{
  content: "«";
}
.pagination__list li:has(.pagination__list-last){
  margin-left: 12px;
}
.pagination__list li:has(.pagination__list-first){
  margin-right: 12px;
}
@media (max-width: 768px){
  .section {
    padding: 15px 0;
  }

  /* Големите admin spacing класове падат на мобилно (всички са !important,
     затова и тук !important; блокът е след дефинициите им в реда на файла) */
  .pt-5{ padding-top:    1.5rem !important; }  .pb-5{ padding-bottom: 1.5rem !important; }  /* 48 → 24 */
  .pt-6{ padding-top:    2rem   !important; }  .pb-6{ padding-bottom: 2rem   !important; }  /* 64 → 32 */
  .pt-7{ padding-top:    2.5rem !important; }  .pb-7{ padding-bottom: 2.5rem !important; }  /* 80 → 40 */
  .pt-8{ padding-top:    3rem   !important; }  .pb-8{ padding-bottom: 3rem   !important; }  /* 96 → 48 */

  .pagination{ margin: 15px 0 0; }
  .pagination__list{
    background: #f6f4f4;
    border-radius: 44px;
    padding: 6px 16px;
    margin: 0;
    gap: 6px;
  }
  .pagination__list li + li:has(.pagination__anchor)::before{ content: none; }
  .pagination__anchor{
    color: #000;
    font-size: 18px;
    padding: 4px 7px;
  }
  .pagination__anchor.active{
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
    box-shadow: 0 6px 12px rgba(9,52,123,0.30);
  }
  .pagination__link{ color: #b0b1b2; font-size: 18px; }
  .pagination__list-last{ color: #09347b; font-size: 18px; }
  .pagination__list li:has(.pagination__list-last){ margin-left: 4px; }
}
#category_with_filters .product-card__button--cart{
  transition: filter 200ms ease, transform 200ms ease;
}

#category_with_filters .product-card__button--cart:hover,
#category_with_filters .product-card__button--cart:focus-visible{
  filter: none;
}

/* Cart button in product sliders same gradient style as the products page everywhere */
.related-products .product-card__button--cart{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: url("../images-new/icons/icons_bg.png") center / cover no-repeat;
  color: #ffffff;
  filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, 0.28));
  box-shadow: none;
  cursor: pointer;
  transition: filter 200ms ease, transform 200ms ease;
}
.related-products .product-card__button--cart::before{
  content: "";
  width: 24px;
  height: 24px;
  background: url("../images-new/icons/cart_icon.png") center / contain no-repeat;
}
.related-products .product-card__button--cart .product-card__button-icon{
  opacity: 0;
  position: absolute;
}
.related-products .product-card__button--cart:hover,
.related-products .product-card__button--cart:focus-visible{
  filter: none;
}

/* Customer info band (above the comment form) */
.product-block_backend .customer-info-band{
  width: 100%;
}
.product-block_backend .customer-info-band .customer-info--alt{
  background-color: #f0efef;
}
.product-block_backend .customer-info{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 50px 16px;
}
.product-block_backend .customer-info__item{
  display: flex;
  align-items: center;
  gap: 16px;
}
.product-block_backend .customer-info__icon{
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin: 0;
}
.product-block_backend .customer-info__text{
  margin: 0;
  padding: 0;
  color: #232323;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.product-block_backend .customer-info__text-mob{
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #000;
}
.product-block_backend .customer-info__text a{
  color: #0d4b8f;
  text-decoration: none;
}
.product-block_backend .customer-info__text a:hover{
  text-decoration: underline;
}

@media (max-width: 991px){
  .product-block_backend .customer-info{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .product-block_backend .customer-info__item{
    width: 100%;
  }
}

/* ===================== HOMEPAGE CUSTOMER-INFO BAND (.customer-info--alt) =====================
   Styled to match Figma (node 6:49): blue-grey rounded panel, 4 equal columns,
   grey vertical dividers, blue circle icons + white glyphs. Scoped to --alt so the
   product page band (.product-block_backend .customer-info) is unaffected. */
/* Trim the default .section{padding:34px 0} above the band only (Figma gap ~16px) */
.section:has(.customer-info--alt){ padding-top: 0px; }
.customer-info--alt{
  display: flex;
  align-items: stretch;
  background-color: #e4ebf2;
  border-radius: 20px;
  min-height: 80px;
}
.customer-info--alt .customer-info__item{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 12px 25px;
  position: relative;
}
/* Grey vertical divider between adjacent items */
.customer-info--alt .customer-info__item + .customer-info__item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 38px;
  background: #a0a0a0;
}
.customer-info--alt .customer-info__icon{
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 8px;
  object-fit: contain;
  background: url('/frontend/images-new/icons/icons_bg.png') center / cover no-repeat;
}
.customer-info--alt .customer-info__text{
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
.customer-info--alt .customer-info__text-mob{
  display: block;
  font-weight: 700;
}
.customer-info--alt .customer-info__text a{
  color: inherit;
  text-decoration: underline;
}
@media (max-width: 767px){
  .section:not(.product-block_backend):has(.customer-info--alt){
    padding-top: 0;
    padding-bottom: 18px;
  }
  .section:not(.product-block_backend):has(.customer-info--alt) .wrapper{
    width: calc(100% - 24px);
    padding-left: 0;
    padding-right: 0;
  }
  .section:not(.product-block_backend):has(.customer-info--alt) .customer-info--alt{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    background-color: transparent;
    border-radius: 0;
    min-height: 0;
  }
  .section:not(.product-block_backend):has(.customer-info--alt) .customer-info__item{
    min-width: 0;
    min-height: 100px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 10px 4px 7px;
    background: #f8f8f8;
    border-radius: 20px;
  }
  .section:not(.product-block_backend):has(.customer-info--alt) .customer-info__item::before{
    display: none;
  }
  .section:not(.product-block_backend):has(.customer-info--alt) .customer-info__icon{
    width: 42px;
    height: 42px;
    padding: 6px;
  }
  .section:not(.product-block_backend):has(.customer-info--alt) .customer-info__text{
    width: 100%;
    font-size: 11px;
    line-height: 1.18;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .section:not(.product-block_backend):has(.customer-info--alt) .customer-info__text-mob{
    font-weight: 400;
  }
}

/* ===================== HOMEPAGE BRANDS SLIDER (.brands-slider) =====================
   Figma "Logos" (node 10:10): row of brand logos with circular 48px arrows on the
   sides. Driven by ProductsBlock::brands_slider() (marka options, visibility=2). */
.brands-slider-section{ padding: 8px 0 24px; overflow: hidden; }
.brands-slider{
  position: relative;
}
.brands-slider .swiper-container{
  width: 100%;
  overflow: hidden;
}
.brands-slider .swiper-slide{
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brands-slider__link{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 87px;
  padding: 0 12px;
}
.brands-slider__img{
  max-height: 46px;
  max-width: 90px;
  width: auto;
  fill: #ffffff;
}
/* Circular prev/next arrows positioned outside the wrapper */
.brands-slider__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #edf1f6;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .2s ease;
  z-index: 1;
}
.brands-slider__arrow--prev{ left: -64px; }
.brands-slider__arrow--next{ right: -64px; }
.brands-slider__arrow:hover{ color: #6580ad; }
.brands-slider__arrow svg{ width: 18px; height: 18px; }
.brands-slider__arrow.swiper-button-disabled{ opacity: .4; cursor: default; }
.brands-slider__arrow.swiper-button-disabled:hover{ color: var(--primary); }
/* ===== Brands marquee (безкраен CSS тикер) — заменя Swiper само за този блок =====
   Два еднакви track-а се движат с translateX(0→-100%); вторият е дубликат за безшевен цикъл.
   animation-duration идва inline от шаблона (пропорционално на броя марки). */
.brands-marquee{ display: flex; width: 100%; overflow: hidden; }
.brands-marquee__track{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  animation-name: brands-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  backface-visibility: hidden;
}
/* Фиксирана ширина на елементите → ширината на track-а е постоянна независимо от
   lazyload зареждането, така двата track-а са винаги равни и няма скок/разсинхрон. */
.brands-marquee__item{ flex: 0 0 auto; width: 120px; display: flex; align-items: center; justify-content: center; }
.brands-marquee:hover .brands-marquee__track{ animation-play-state: paused; }
@keyframes brands-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}
@media (max-width: 767px){
  .brands-marquee__item{ width: 100px; }
}
@media (min-width: 768px) and (max-width: 1199px){
  .brands-marquee__item{ width: 118px; }
}
@media (max-width: 767px){
  .brands-slider-section{ padding: 4px 0 18px; }
  .brands-slider-section .brands-slider{
    padding: 0 36px;
  }
  .brands-slider-section .swiper-container{
    height: 74px;
  }
  .brands-slider-section .swiper-slide{
    width: calc((100% - 32px) / 3) !important;
    margin-right: 16px !important;
  }
  .brands-slider-section .brands-slider__link{
    height: 74px;
    padding: 0 4px;
  }
  .brands-slider-section .brands-slider__img{
    max-width: 86px;
    max-height: 42px;
  }
  .brands-slider-section .brands-slider__arrow{
    display: inline-flex;
    width: 30px;
    height: 30px;
    background: #edf1f6;
  }
  .brands-slider-section .brands-slider__arrow--prev{ left: 0; }
  .brands-slider-section .brands-slider__arrow--next{ right: 0; }
  .brands-slider-section .brands-slider__arrow svg{
    width: 14px;
    height: 14px;
  }
}
@media (min-width: 430px) and (max-width: 767px){
  .brands-slider-section .swiper-slide{
    width: calc((100% - 36px) / 4) !important;
    margin-right: 12px !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px){
  .brands-slider-section{ padding: 6px 0 20px; }
  .brands-slider-section .brands-slider{
    padding: 0 38px;
  }
  .brands-slider-section .swiper-container{
    height: 74px;
  }
  .brands-slider-section .swiper-slide{
    width: calc((100% - 90px) / 6) !important;
    margin-right: 18px !important;
  }
  .brands-slider-section .brands-slider__link{
    height: 74px;
    padding: 0 6px;
  }
  .brands-slider-section .brands-slider__img{
    max-width: 100px;
    max-height: 42px;
  }
  .brands-slider-section .brands-slider__arrow{
    width: 30px;
    height: 30px;
  }
  .brands-slider-section .brands-slider__arrow--prev{ left: 0; }
  .brands-slider-section .brands-slider__arrow--next{ right: 0; }
  .brands-slider-section .brands-slider__arrow svg{
    width: 14px;
    height: 14px;
  }

  .mega::before {
    top: 135px;
  }

  .mega__panel {
    margin-top: 135px;
  }
}

/* " Subra" storytelling timeline */
.st-page{ color: #333; }

/* */
.st-main-title{ text-align: center; color: #12387e; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: .5rem; }
.st-main-title-rule{ width: 250px; height: 2px; background: #e4ebf2; margin: 0 auto 3rem; }

/* */
.st-timeline{ position: relative; padding-top: 5rem; }
.st-timeline::before{ content: ''; position: absolute; top: 0; bottom: 46px; left: 50%; transform: translateX(-50%) scaleY(0); transform-origin: top center; width: 2px; background: #09347b; opacity: 0; z-index: 0; transition: opacity .6s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.st-timeline.is-visible::before{ opacity: 1; transform: translateX(-50%) scaleY(1); }
.st-start-dot{ display: block; width: 14px; height: 14px; border-radius: 50%; background: #09347b; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 1; transition: opacity .6s ease; }
.st-timeline.is-visible .st-start-dot{ opacity: 1; }

.tl-item{ display: grid; grid-template-columns: 1fr 44px 1fr; column-gap: 28px; row-gap: 15px; align-items: start; margin-bottom: 50px; position: relative; z-index: 1; }

.tl-marker{ grid-area: marker; display: flex; justify-content: center; align-self: start; position: relative; opacity: 0; }
.tl-item.is-visible .tl-marker{ opacity: 1; }
.tl-dot{ width: 36px; height: 36px; border-radius: 50%; background-color: var(--c); background-image: var(--marker-image, none); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 2; }
.tl-dot, .st-center-icon-image{ filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .22)); }

.tl-marker::before{ content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 56px; transform: translate(-50%, -50%); background: #fff; z-index: 1; }
.tl-marker::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 60px; transform: translateY(-50%); border: 2px solid #09347b; background: transparent; z-index: 1; }
.tl-item--left .tl-marker::after{ border-left: 0; border-radius: 0 60px 60px 0; }
.tl-item--right .tl-marker::after{ transform: translate(-100%, -50%); border-right: 0; border-radius: 60px 0 0 60px; }

.tl-label{ grid-area: label; align-self: start; display: flex; align-items: center; gap: .35rem; height: 36px; font-size: 36px; font-weight: 700; color: var(--c); line-height: 1.2; white-space: nowrap; }
.tl-chev{ opacity: .65; font-weight: 700; }
.tl-arrow{ width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -.16em; stroke: currentColor; flex: none; }
.tl-arrow-img{ width: 22px; height: 19px; display: inline-block; vertical-align: middle; align-self: center; margin-top: 5px; flex: none; }

.tl-text{ font-size: 15px; color: #000000; --tl-x: 0px; --tl-y: 0px; grid-area: text; background: var(--bg); border-radius: 10px; padding: 1.25rem 1.5rem; line-height: 1.75; text-align: left; transform: translate(var(--tl-x), var(--tl-y)); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.tl-text p{ margin: 0 0 .75rem; }
.tl-text p:last-child{ margin-bottom: 0; }

.tl-theme--orange{ --c: #f3b97d; --bg: #fefbf8; --marker-image: url('../images-new/green_sphere1.png'); }
.tl-theme--blue{ --c: #5072a1; --bg: #f6f8fa; --marker-image: url('../images-new/blue_sphere.png'); }
.tl-theme--green{ --c: #70a665; --bg: #f8faf7; --marker-image: url('../images-new/green_sphere.png'); }

.tl-item--right{ grid-template-areas: ". marker label" ". marker text"; }
.tl-item--left{ grid-template-areas: "label marker ." "text marker ."; }

.tl-item--right .tl-label{ justify-self: start; text-align: left; }
.tl-item--left .tl-label{ justify-self: end; text-align: right; }

/* ( ) */
.st-center{ display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; margin-top: 40px; }
.st-center::before{ content: ''; position: absolute; top: 50px; bottom: 0; left: 50%; width: 5px; transform: translateX(-50%); background: #fff; z-index: -1; }
.st-center-icon{ width: 102px; height: 86px; position: relative; }
.st-center-icon::before{ content: ''; position: absolute; top: 0; left: 50%; width: 100px; height: 50px; transform: translateX(-50%); border: 2px solid #09347b; border-bottom: 0; border-radius: 52px 52px 0 0; z-index: 1; }
.st-center-icon::after{ content: ''; position: absolute; top: 2px; left: 50%; width: 5px; height: 32px; transform: translateX(-50%); background: #fff; z-index: 2; }
.st-center-icon-image{ position: absolute; top: 18px; left: 50%; width: 68px; height: 68px; transform: translateX(-50%); background: url('../images-new/cennosti.png') center / contain no-repeat; z-index: 3; }
.st-values-marker{ display: none; }
.st-values-title{ font-size: 36px; font-weight: 700; color: #09347b; letter-spacing: .1em; text-transform: uppercase; text-align: center; margin: 1.5rem 0 0; }

/* */
.st-values-grid{ margin-top: 50px; --bs-gutter-x: 40px; --bs-gutter-y: 40px; }
.st-value-card{ padding: 1.5rem; border-radius: 10px; height: 100%; background: #f4f6f9; }
.st-value-name{ font-size: 22px; font-weight: 400; color: #09347b; margin-bottom: .6rem; }
.st-value-card p{ font-size: 15px; color: #000000; line-height: 1.65; margin: 0; }

/* Анимации при скрол */
.tl-label, .st-values-title, .st-value-card{ opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease, transform 1.2s ease; }
.tl-text{ opacity: 0; }
.tl-item.is-visible .tl-label, .st-values-title.is-visible, .st-value-card.is-visible{ opacity: 1; transform: none; }
.tl-item.is-visible .tl-text{ opacity: 1; }

@media (min-width: 768px){
  .tl-item--left .tl-text{ --tl-x: -50px; opacity: 0; }
  .tl-item--right .tl-text{ --tl-x: 50px; opacity: 0; }
  .tl-item.is-visible .tl-text{ --tl-x: 0px; opacity: 1; }
}

@media (hover: hover){
  .tl-text:hover{ --tl-y: -5px; }
  .st-value-card.is-visible:hover{ transform: translateY(-5px); }
}

@media (max-width: 767px){
  /* Единична лява линия, минаваща през всичките 4 етапа (спира при маркера на „Ценности") */
  .st-timeline::before{ left: 22px; bottom: 22px; transform: scaleY(0); }
  .st-timeline.is-visible::before{ transform: scaleY(1); }
  .st-start-dot{ left: 22px; margin-left: 0; }
  .tl-item, .tl-item--right, .tl-item--left{
    grid-template-columns: 44px 1fr;
    grid-template-areas: "marker label" "marker text";
    column-gap: 16px;
  }

  /* Маркер: полукръгла дъга като на десктоп, отворена отдясно (към съдържанието) */
  .tl-item--left .tl-marker::after,
  .tl-item--right .tl-marker::after,
  .st-values-marker::after{
    width: 30px; height: 60px;
    transform: translate(-100%, -50%);
    border: 2px solid #09347b;
    border-right: 0;
    border-radius: 60px 0 0 60px;
  }

  /* Заглавие + » шеврон преди него, в цвета на темата */
  .tl-label, .tl-item--left .tl-label{ justify-self: start !important; text-align: left !important; font-size: 28px; }
  .tl-label::before{ content: '\00BB'; color: var(--c); font-weight: 700; }
  .tl-arrow-img{ display: none; }

  /* Карти */
  .tl-text, .tl-item--left .tl-text{ text-align: left; border-radius: 20px; font-size: 13px; }

  /* „Ценности" → 4-ти етап от таймлайна */
  .st-center{
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    align-items: center;
    margin: 40px 0 0;
  }
  .st-center::before{ display: none; }
  .st-center-icon{ display: none; }
  .st-values-marker{
    display: flex;
    opacity: 1;
    grid-area: auto;
    grid-column: 1;
    grid-row: 1;
    --c: #09347b;
  }
  .st-values-marker .tl-dot{
    background-color: transparent;
    background-image: url('../images-new/default_Button.svg');
    background-size: cover;
  }
  .st-values-title{
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    text-align: left;
    font-size: 28px;
    text-transform: none;
    letter-spacing: normal;
  }
  .st-values-title::before{
    content: '\00BB';
    color: var(--color-2, #09347b);
    font-weight: 700;
  }

  /* Ценности карта: сливаме 6-те карти в една */
  .st-values-grid{
    margin: 20px 0 0 60px;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    background: #f6f8fa;
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
  }
  .st-value-card{
    background: transparent;
    padding: 0;
    border-radius: 0;
    height: auto;
    margin-bottom: 1.5rem;
  }
  .st-values-grid .col-md-4:last-child .st-value-card{ margin-bottom: 0; }
  .st-value-name{ font-size: 16px; }
  .st-value-card p{ font-size: 13px; }

  .st-main-title{ font-size: 1.7rem; }
}

/* ===================== NEWS / HEALTH PORTAL (homepage news block) ===================== */
.news-portal{
  background: #fff;
  font-family: var(--font-display);
}
.news-portal__head{
  text-align: center;
  max-width: 1220px;
  margin: 0 auto 44px;
}
.news-portal__title{
  margin: 50px 0 0 0;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text);
}
.news-portal__subtitle, .news-portal__subtitle{
  margin: 30px auto 0;
  line-height: 24px;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  color: #555555;
}

/* Slider track */
.news-portal-slider .swiper-container{
  overflow: hidden;
}
.news-portal__slide{
  width: calc((100% - 60px) / 3);
  height: auto;        /* let swiper stretch slides to equal height */
}
@media (max-width: 992px){
  .news-portal__slide{ width: calc((100% - 30px) / 2); }
}
@media (max-width: 600px){
  .news-portal__slide{ width: 100%; }
}
/* Homepage only: cards scale so 3/2/1 per row + the 90px gap always fit the
   viewport (no horizontal clipping). Max 482x582 at the Figma design width. */
@media (min-width: 993px){
  .news-portal--home .news-portal__slide{
    width: calc((100% - 180px) / 3); /* 3 cards + 2 x 90px gap */
    max-width: 482px;
    height: auto;
  }

  .locations__nearest.button--sub{
    min-width: 160px;
  }
}
@media (max-width: 992px){
  .news-portal--home .news-portal__slide{
    width: calc((100% - 30px) / 2);  /* 2 cards + 1 x 30px gap */
  }
}
@media (max-width: 600px){
  .news-portal--home .news-portal__slide{
    width: 100%;
    aspect-ratio: auto;              /* single card: height follows content */
  }
}

/* Card */
.news-card{
  --card-px-l: 32px;
  --card-px-r: 44px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #edf1f6;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 12px -6px rgba(42, 53, 66, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.news-card__link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.news-card__media{
  position: relative;
}
.news-card__media .aspect-ratio{
  background: #edf1f6;
}
.news-card__media .aspect-ratio img,
.news-card__media img{
  object-fit: cover;
}
.news-card__body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px var(--card-px-r) 14px var(--card-px-l);
}
.news-card__eyebrow{
  position: relative;
  display: inline-block;
  align-self: flex-start;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #197b30;
}
.news-card__eyebrow::before{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--card-px-l));
  transform: translateY(-50%);
  width: 22px;
  height: 14px;
  background: #197b30;
  border-radius: 0 999px 999px 0;
}
.news-card__eyebrow--news{
  color: #09347b;
}
.news-card__eyebrow--news::before{
  background: #09347b;
}
.news-card__title{
  margin: 16px 0 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: #09347b;
}
.news-card__date{
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: #898989;
}
.news-card__text{
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--text);
}
.news-card__more{
  white-space: nowrap;
  color: #015394;
  text-decoration: underline;
}

/* Card hover */
@media (hover: hover){
  .news-card__link:hover .news-card,
  .news-card:hover{ transform: translateY(-4px); box-shadow: none; }
  .news-card__link:hover .news-card__title{ color: var(--primary-2); }
}

/* Slider nav reuses the shared .related-products__nav arrows for visual
   consistency with the other product sliders. Only viewport spacing needs
   a tweak so the card hover-lift isn't clipped. */
.news-portal .related-products__viewport{
  padding: 8px 4px 18px;
}
/* Homepage: inset the news track by 22px (4px viewport + 18px) so the card
   row's outer edges line up with the product sliders (.related-products__slide
   padding 0 18px). Cards auto-shrink to fit; 90px gap unchanged. */
.news-portal--home .related-products__viewport{
  padding: 12px 22px 18px;
}
@media (max-width: 767px){
  .news-portal--home .wrapper{
    width: calc(100% - 24px);
  }
  .news-portal--home .related-products__viewport{
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 993px){
  .news-portal--home{
    padding-bottom: 100px;
  }
}

/* Arrows outside the cards, matching the other product sliders
   (.related-products--promo): absolute in the side margins, big chevron. */
.news-portal-slider .related-products__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  color: var(--primary);
  z-index: 2;
}
.news-portal-slider .related-products__nav--prev{ left: -64px; }
.news-portal-slider .related-products__nav--next{ right: -64px; }
.news-portal-slider .related-products__nav:not(.swiper-button-disabled):hover{ color: #16478b; }
.news-portal-slider .related-products__nav.swiper-button-disabled{ color: #b7b7b7; }
.news-portal-slider .related-products__nav-icon{ width: 36px; height: 42px; }

@media (min-width: 1200px) and (max-width: 1700px){
  .news-portal--home .news-portal-slider{
    padding-left: 54px;
    padding-right: 54px;
  }
  .news-portal--home .news-portal-slider .related-products__nav{
    width: 42px;
    height: 42px;
    color: var(--primary);
    border-radius: 50%;
  }
  .news-portal--home .news-portal-slider .related-products__nav--prev{
    left: 6px;
  }
  .news-portal--home .news-portal-slider .related-products__nav--next{
    right: 6px;
  }
  .news-portal--home .news-portal-slider .related-products__nav-icon{
    width: 22px;
    height: 26px;
  }
  .news-portal--home .news-portal-slider .related-products__nav.swiper-button-disabled{
    color: #b7b7b7;
  }
}

@media (min-width: 641px) and (max-width: 1199px){
  .news-portal--home .news-portal-slider{
    flex-wrap: wrap;
  }
  .news-portal--home .news-portal-slider .related-products__pagination{
    position: static;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 7px;
    flex-basis: 100%;
    margin-top: 24px;
  }
  .news-portal--home .news-portal-slider .related-products__pagination.swiper-pagination-bullets-dynamic{
    overflow: visible;
  }
  .news-portal--home .news-portal-slider .related-products__pagination .swiper-pagination-bullet{
    width: 40px;
    height: 4px;
    margin: 0 3.5px;
    background: #e4ebf2;
    opacity: 1;
    border-radius: 20px;
    left: auto !important;
    transform: none !important;
    transition: background 200ms ease;
  }
  .news-portal--home .news-portal-slider .related-products__pagination .swiper-pagination-bullet-active{
    background: var(--primary);
  }
}

@media (prefers-reduced-motion: reduce){
  .news-card{ transition: none; }
}


.related-products.related-products--actual{
  background: var(--section-bg, #f8f8f8);
}
.section-arrow-divider--themed{
  position: relative;
  z-index: 3;
  align-items: flex-start;
  padding: 0;
  margin-top: -80px;
  overflow: visible;
  background: linear-gradient(to bottom, transparent 50px, var(--section-bg, #f8f8f8) 50px);
  /* Purely decorative — must not swallow clicks on the brochure band underneath it. */
  pointer-events: none;
}
.section-arrow-divider--themed .section-arrow-divider__circle{
  width: 100px;
  height: 100px;
  margin-top: 0;
  border-radius: 50%;
  background-color: var(--section-bg, #f8f8f8);
  background-image: url("../images-new/actual-arrow-down.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px auto;
}
.section-arrow-divider--themed .section-arrow-divider__circle img{
  display: none;
}

.section-arrow-divider--themed + .related-products{
  padding-top: 24px;
}
.related-products.related-products--actual,
.related-products.related--products-new-products{
  padding-bottom: 48px !important;
}

@media (max-width: 767px){
  .related-products.related-products--actual, .related-products.related--products-new-products {
      padding-bottom: 29px !important;
  }

  .news-portal--home .related-products__viewport{
    padding-bottom: 10px;
  }
}

.related-products.related--products-new-products{
  background: var(--section-bg, #f8f8f8);
}
.related-products.related--products-new-products .title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.25;
  color: #000;
  text-transform: uppercase;
}


.related-products--actual .title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.25;
  color: #000;
  text-transform: uppercase;
}

.related-products--actual .related-products__cta-row{
  display: flex;
  justify-content: center;
  margin-top: 44px;
}
.related-products--actual .related-products__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  height: 50px;
  padding: 0 30px;
  border-radius: 150px;
  background: url('../images-new/icons/see_more_bg.png') center / cover no-repeat;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: box-shadow 200ms ease;
}
.related-products--actual .related-products__cta:hover,
.related-products--actual .related-products__cta:focus-visible{
  box-shadow: none;
}

.related--products-new-products.section-arrow-divider--themed {
    margin-top: 0;
}

@media (max-width: 767px){
  /* Mobile: shrink the themed arrow circle 100px→70px / 30px→21px for ALL
     related-products sliders (Figma nodes 22:12, 269:253). Circle stays centred
     on the notch line, so the line moves to the circle's new half-height (35px)
     and the divider is pulled up 35px so the card top sits on the previous
     section's bottom edge (its semicircle overlaps only the previous slider's
     46px bottom padding, keeping the pagination bullets visible). Variants that
     use ::before (actual / new-products) override the gradient below. */
  .section-arrow-divider--themed{
    /* margin-top: -35px; */
    background: linear-gradient(to bottom, transparent 35px, var(--section-bg, #f8f8f8) 35px);
  }
  .section-arrow-divider--themed .section-arrow-divider__circle{
    width: 70px;
    height: 70px;
    background-size: 21px auto;
  }

  /* Slider titles: 30px display → 22px on mobile (overrides the desktop rules). */
  .related-products--actual .title,
  .related-products.related--products-new-products .title{
    font-size: 22px;
  }

  .section-arrow-divider--themed.related-products--actual{
    margin-top: -35px;
    background: transparent;
    border-radius: 0;
  }
  .section-arrow-divider--themed.related-products--actual::before{
    content: "";
    position: absolute;
    inset: 35px 0 0;
    z-index: 0;
    border-radius: 0;
    background: var(--section-bg, #f8f8f8);
  }
  .section-arrow-divider--themed.related-products--actual .section-arrow-divider__circle{
    position: relative;
    z-index: 1;
  }

  .section-arrow-divider--themed.related-products--actual + .related-products.related-products--actual{
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .section-arrow-divider--themed.related--products-new-products{
    /* -35px matches the shared mobile notch line; overrides the desktop
       margin-top:0 (set earlier) for the pulled-up card look. */
    margin-top: 0px;
    margin-left: 12px;
    margin-right: 12px;
    background: transparent;
    border-radius: 20px 20px 0 0;
  }
  .section-arrow-divider--themed.related--products-new-products::before{
    content: "";
    position: absolute;
    inset: 35px 0 0;
    z-index: 0;
    border-radius: 20px 20px 0 0;
    background: var(--section-bg, #f8f8f8);
  }
  .section-arrow-divider--themed.related--products-new-products .section-arrow-divider__circle{
    position: relative;
    z-index: 1;
  }

  .section-arrow-divider--themed.related--products-new-products + .related-products.related--products-new-products{
    margin-left: 12px !important;
    margin-right: 12px !important;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
  }
}

/* ===================== SINGLE NEWS ARTICLE ===================== */
/* Match the category page header spacing (.breadcrumbs-section 18px + title 20px) */
.section:has(.news-article){
  padding-top: 18px;
}
.news-article{
  background: #fff;
  padding: 0 0 40px;
}
.news-article__title{
  margin: 0px 0 12px;
  color: #000;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0;
}
.news-article__meta{
  margin-bottom: 24px;
}
.news-article__date{
  font-size: var(--fs-14);
  color: var(--muted-2);
  font-weight: 500;
}
.news-article__media{
  margin: 0 0 28px;
}
.news-article__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.news-article__gallery-btn{
  margin-top: 30px;
}
.news-article__gallery-btn .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 30px;
  background: url('../images-new/finish_order.png') center / 100% 100% no-repeat;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
.news-article__gallery-btn .button:hover,
.news-article__gallery-btn .button:focus-visible{
  color: #fff;
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}
.news-article__gallery-btn .js-gallery-json{
  display: none;
}
.news-article__body{
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}
.news-article__body .scrollable-content{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 24px;
}
.news-article__body .scrollable-content table{
  width: auto;
  min-width: 640px;
  border-collapse: collapse;
}
.news-article__body .scrollable-content td,
.news-article__body .scrollable-content th{
  padding: 12px 14px;
  border: 1px solid var(--line);
  vertical-align: top;
}
.news-article__body .scrollable-content p{
  margin: 0;
}
.news-article__body img{
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.news-article__share{
  position: relative;
  width: 100%;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.news-article__share .product__info-share-link{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-height: 58px;
  padding: 0 6px;
  color: #222;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  text-decoration: none;
}
.news-article__share .product__info-share-icon{
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: url('../images-new/default_Button.svg') center / 100% 100% no-repeat;
  filter: drop-shadow(3px 4px 5px rgba(0,0,0,0.28));
  color: #fff;
}
.news-article__share .product__info-share-link:hover .product__info-share-icon{
  filter: none;
}
.news-article__share .product__info-share-icon .icon{
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.news-article__share .product__info-share-text{
  margin: 0;
  color: #222;
}
.news-article__share .product__info-share-modal{
  position: absolute;
  z-index: 5;
  left: 55px;
  top: -20px;
  padding: 30px 35px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.07);
}
.news-article__share .product__info-share-modal.hidden{
  display: none;
}
.news-article__share .product__info-share-modal:after{
  z-index: 1;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  top: 35px;
  left: 0;
  box-sizing: border-box;
  border: 5px solid #fff;
  border-color: transparent transparent #fff #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);
  box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.07);
}
.news-article__share .product__info-share-modal .modal-close-btn{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  background: 0 0;
  color: currentColor;
  cursor: pointer;
  transform: rotate(45deg);
}
.news-article__share .product__info-share-modal .modal-close-btn .icon{
  width: 100%;
  height: 100%;
}
.news-article__share .product__info-share-social{
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  text-decoration: none;
}
.news-article__share .product__info-share-social:last-child{
  margin-bottom: 0;
}
.news-article__share .product__info-share-social-icon{
  width: 17px;
  height: 17px;
}
.news-article__share .product__info-share-social-text{
  margin: 0 0 0 10px;
  color: #232323;
  font-size: 12px;
  font-weight: 500;
}
@media (max-width: 768px){
  .news-article{ padding: 0; }
  .section:has(.news-article){
    padding-top: 15px;
  }

  .news-article__title{
    margin-bottom: 8px;
  }

  .news-article__meta{
    margin-bottom: 15px;
  }

  .news-article__media{
    margin: 0 0 15px;
  }

  .news-article__gallery-btn {
      margin-top: 15px;
  }

  .news-article__share {
    margin-top: 24px;
    padding-top: 15px;
  }
}

.related-news__title{
  margin-top: 56px;
  margin-bottom: 40px;
}
@media (max-width: 768px){
  .related-news__title{
    margin-top: 40px;
    margin-bottom: 28px;
  }
}

/* ===================== OFFICES / PHARMACY ADDRESSES ===================== */
.offices-block{
  position: relative;
  padding: 48px 0;
}
.offices-block::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50vw;
  right: -50vw;
  z-index: -1;
  background: #F8F8F8;
}
.offices-block__title{
  color: var(--primary);
  margin-bottom: 28px;
}
@media (max-width: 768px){
  .offices-block{ padding: 32px 0; }
}
.offices-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 40px;
}
.offices-grid--more{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height .45s ease, opacity .45s ease, margin-top .45s ease;
}
.offices-grid--more.is-open{
  opacity: 1;
  margin-top: 18px;
}
.office-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.office-item__pin{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--primary);
}
.office-item__text{
  display: flex;
  flex-direction: column;
}
.office-item__name{
  color: var(--primary);
  font-weight: 600;
  font-size: var(--fs-14);
  line-height: 1.35;
}
.office-item__addr{
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.4;
}
.offices-block__actions{
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.offices-block__toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--primary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}
.offices-block__toggle-arrow{
  transition: transform .3s ease;
}
.offices-block__toggle.is-open .offices-block__toggle-arrow{
  transform: rotate(90deg);
}
.offices-block__cta{
  margin-top: 28px;
}
@media (max-width: 1024px){
  .offices-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .offices-grid{ grid-template-columns: 1fr; }
}

/* ===================== SHOPPING CART (basket) scoped to #cart-page ===================== */
/* Translated rule-by-rule from the old main.css cart design into the new design tokens.
   Everything is scoped under #cart-page so nothing outside the cart can be affected.
   Old red #ff003b -> #f0212d (prices/danger); counter -> neutral (--line);
   gift icon -> --success; free delivery -> green text (no yellow box). */

/* Global a11y helper purely additive (no prior global definition) */
.visuallyhidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sticky bottom bar stays hidden (matches old main.css) */
#cart-page .second-nav{ display: none; }

/* New page title */
#cart-page .basket-page-title{
  margin: 0 0 24px;
  color: #111;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* ---------- Empty cart ---------- */
#cart-page .white-box:has(.empty-basket-info){
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 20px;
  text-align: center;
}
#cart-page .white-box:has(.empty-basket-info) .icon-center{
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 20px;
  position: static;
  transform: none;
}
#cart-page .white-box:has(.empty-basket-info) .title{
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
}
#cart-page .white-box:has(.empty-basket-info) .title--red{ color: #f0212d; }
#cart-page .white-box:has(.empty-basket-info) .empty-basket-info{
  margin: 8px 0 0;
  color: var(--muted);
}

/* ---------- Panel (the form holds header + product rows) ---------- */
#cart-page .basket-products{ padding: 0; }
#cart-page .basket-products .form1{
  background: #edf1f6;
  border: 1px solid rgba(174, 188, 208, .18);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  padding: 24px;
  box-shadow: none;
}

/* ---------- Column header (desktop) ---------- */
/* Mirror the product row's right section exactly so each value sits centered
   under its label: same 56% width, same 8px inter-column gap, and a matching
   right reserve for the trash column (row gap 16 + delete margin 18 + icon 20 = 54px). */
#cart-page .basket-products .products-header{
  display: flex;
  gap: 8px;
  align-items: center;
  /* right reserve = card padding 20 + row gap 16 + delete margin 18 + icon 20 = 74px */
  margin: 0 74px 16px auto;
}
#cart-page .basket-products .products-header-big{
  /* match the details block, which is 56% of the card's content box (card has 20px
     side padding → 40px narrower than the header's parent): 56% - 0.56*40 ≈ 22px */
  flex: 0 0 auto;
  width: calc(56% - 22px);
  max-width: calc(56% - 22px);
  padding: 0;
}
#cart-page .basket-products .products-header-item{
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #09347b;
}
#cart-page .basket-products .products-header-mob{ display: none; }

/* ---------- Product rows (cards) ---------- */
#cart-page .basket-products .products-list{
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#cart-page .basket-products .products-list-cont{ padding: 0; }
#cart-page .basket-products .products-item,
#cart-page .basket-products__item{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(219, 226, 236, .72);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(36, 59, 84, .06);
}
/* #cart-page .basket-products .products-item:last-child{ border-bottom: none; } */

/* Left: image + title */
#cart-page .basket-products .products-info{
  display: flex;
  flex: 1;
  align-items: center;
  gap: 18px;
  padding: 0;
  min-height: 0;
}
#cart-page .basket-products__info{ flex-wrap: nowrap; }
#cart-page .basket-products .products-info__img,
#cart-page .basket-products__info-img{
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  max-width: 64px;
  margin: 0;
}
#cart-page .basket-products .products-info__img img,
#cart-page .basket-products__info-img img{
  width: 64px;
  height: 64px;
  fill: #ffffff;
}
#cart-page .basket-products .products-info__title,
#cart-page .basket-products__info-title{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  opacity: 1;
}
#cart-page .basket-products__info-title .title__link{
  color: var(--text);
  text-decoration: none;
}
#cart-page .basket-products__info-title .title__link:hover{ color: var(--primary); }

/* Right: details (code | counter | unit price | sum) */
#cart-page .basket-products .products-details{
  display: flex;
  flex: 0 0 56%;
  max-width: 56%;
  gap: 8px;
  align-items: center;
}
#cart-page .basket-products .products-details-big{ margin: 0; }
#cart-page .basket-products .products-details-item,
#cart-page .basket-products__details-item{
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

/* Quantity counter */
#cart-page .basket-products .counter-input-cont{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
#cart-page .basket-products .counter-input{
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 124px;
}
#cart-page .basket-products .counter-input__button,
#cart-page .basket-products .counter-input__element{
  flex-shrink: 0;
  background-color: transparent;
  font-family: var(--font-sans);
}
#cart-page .basket-products .counter-input__button{
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 200ms ease, opacity 200ms ease;
}
#cart-page .basket-products .counter-input__button:hover{ border-color: var(--primary); }
#cart-page .basket-products .counter-input__button--increase::after,
#cart-page .basket-products .counter-input__button::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  transform: translate(-50%, -50%);
  background-color: var(--text);
}
#cart-page .basket-products .counter-input__button--increase::after{
  width: 1px;
  height: 10px;
}
#cart-page .basket-products .counter-input__button[disabled]{ cursor: default; opacity: .4; }
#cart-page .basket-products .counter-input__element{
  width: 34px;
  height: 34px;
  padding: 0;
  outline: 0;
  border: 1px solid #b9c4d3;
  border-radius: 50%;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: default;
}
#cart-page .basket-products .counter-input__element::-webkit-inner-spin-button,
#cart-page .basket-products .counter-input__element::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Prices: old (strike, red) + new */
#cart-page .basket-products__details-item-old-price{
  display: block;
  margin-bottom: 3px;
  color: #111;
  text-decoration: line-through;
  font-size: 13px;
}
#cart-page .basket-products__details-item-new-price{
  display: block;
  text-decoration: none;
  font-weight: 700;
  color: #111;
}
#cart-page .basket-products__details-item-old-price + .basket-products__details-item-new-price{
  color: #f0212d;
}

/* Delete */
#cart-page .basket-products .delete-btn{
  flex: 0 0 auto;
  display: inline-flex;
  margin: 0 0 0 18px;
  color: var(--muted-2);
}
#cart-page .basket-products .delete-btn:hover{ color: #f0212d; }
#cart-page .basket-products__delete-icon{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ---------- Column separators (desktop): thin #edf1f6 lines centered in the
   gaps between the value columns (title | код | количество | ед.цена | сума | trash).
   Desktop only — the mobile card layout uses a different grid. ---------- */
@media (min-width: 769px){
  #cart-page .basket-products .products-details,
  #cart-page .basket-products .products-details > * + *,
  #cart-page .basket-products .delete-btn{ position: relative; }
  #cart-page .basket-products .products-details::before,
  #cart-page .basket-products .products-details > * + *::before,
  #cart-page .basket-products .delete-btn::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: #edf1f6;
    pointer-events: none;
  }
  #cart-page .basket-products .products-details::before{ left: -8px; }        /* title | код (row gap 16) */
  #cart-page .basket-products .products-details > * + *::before{ left: -4px; } /* between value columns (gap 8) */
  #cart-page .basket-products .delete-btn::before{ left: -17px; }             /* сума | trash (gap 16 + margin 18) */
}

/* ---------- Promotion / gift rows inside an item ---------- */
#cart-page .basket-products__item-general{
  display: flex;
  flex: 1;
  align-items: center;
  gap: 16px;
}
#cart-page .basket-products__item--gift{
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 16px;
  align-items: center;
}
#cart-page .basket-products__item__icon{
  position: absolute;
  top: -22px;
  left: 32px;
  width: 18px;
  height: 18px;
  fill: var(--success);
}
#cart-page .basket-products__item__preview{
  flex-grow: 2;
  width: 100%;
  max-width: 76px;
}
#cart-page .basket-products__item__content{
  margin-left: 24px;
  font-size: var(--fs-13);
  line-height: 1.38;
  color: var(--muted);
}
#cart-page .basket-products__item--promotion{
  align-items: center;
  justify-content: space-between;
}
#cart-page .basket-products__item--promotion .basket-products__item-wrap{
  display: flex;
  align-items: center;
}
#cart-page .basket-products__item--promotion .products-details-big{ margin: 0; }
#cart-page .basket-products__item--promotion-item{ flex-wrap: wrap; }

/* Promotion preview (mini list inside cart) */
#cart-page .basket-products .products-list--promotion-preview .products-item{
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 10px;
}
#cart-page .basket-products .products-list--promotion-preview .products-info__title-promotion{ min-height: 100%; }
#cart-page .basket-products .products-list--promotion-preview .products-item__promotion-preview-item{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
#cart-page .basket-products .products-list--promotion-preview .products-item__promotion-preview-item:not(:last-child){ margin-bottom: 24px; }

/* ---------- Promo code + totals block (below the panel) ---------- */
#cart-page .basket-products .products__prices{
  margin-top: 0;
  background: #edf1f6;
  border: 1px solid rgba(174, 188, 208, .18);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  padding: 20px 24px 22px;
  box-shadow: 0 12px 22px rgba(27, 42, 61, .04);
}
#cart-page .basket-products .products__prices-table{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 0;
  text-align: right;
  margin: 0;
  width: 100%;
}
#cart-page .basket-products .products__prices-right{ margin: 0; }
#cart-page .basket-products .basket-products__table > tbody:last-child{
  flex: 0 0 340px;
}
#cart-page .basket-products .basket-products__table-voucher{
  flex: 1 1 48%;
  min-width: 280px;
  text-align: left;
}
#cart-page .basket-products .products__prices-item{
  margin: 0;
  padding: 4px 0;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
}
#cart-page .basket-products .basket-products__table > tbody:last-child .products__prices-item:first-child{
  padding-right: 12px;
}
#cart-page .basket-products .basket-prices-savings .products__prices-item{
  color: var(--success);
  font-weight: 700;
}
#cart-page .basket-products .products__prices-item--danger{
  padding-bottom: 0;
  color: #f0212d;
}
#cart-page .basket-products .products__prices-item-info{
  margin: 0;
  padding-bottom: 18px;
  font-size: var(--fs-13);
  font-weight: 500;
  text-align: right;
  color: var(--muted-2);
}
#cart-page .basket-products .products__prices-info{
  margin: 16px 0 24px;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.38;
  text-align: right;
  color: var(--muted);
}
#cart-page .basket-products .products__prices-free-delivery,
#cart-page .basket-products .products__prices-free-delivery-success{
  margin: 8px 0 8px auto;
  max-width: 360px;
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
  color: var(--success);
  background: transparent;
}
/* Total = last totals row */
#cart-page .basket-products .basket-products__table > tbody:last-child tr:last-child .products__prices-item{
  color: var(--primary);
  font-weight: 800;
  font-size: var(--fs-18);
}

/* Promo code — single row: label + pill input + round "ОК" submit (matches Figma) */
#cart-page .basket-products .basket-promo{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
#cart-page .basket-products .basket-products__table-voucher-text{
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
#cart-page .basket-products .basket-promo__field{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
#cart-page .basket-products .basket-products__table-voucher .form__control,
#cart-page .basket-products .basket-promo__input{
  width: 100%;
  max-width: 220px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
/* round navy "ОК" submit button (navy sphere asset) */
#cart-page .basket-products .basket-promo__ok{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url('/frontend/images-new/icons/icons_bg.png') center / cover no-repeat;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
}
/* "Откажи" — underline link, only shown when a code is applied */
#cart-page .basket-products .basket-promo__remove{
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
#cart-page .basket-products .basket-products__table tbody:nth-of-type(2):not(.basket-products__table-voucher) td:nth-of-type(1){ width: 100%; }
#cart-page .basket-products .basket-products__table tbody:nth-of-type(2):not(.basket-products__table-voucher) td:nth-of-type(2){ white-space: nowrap; }

/* Delivery (i) info popover on the cart page uses the same component as the mini basket. */
#cart-page .basket-delivery-info-tip{
  margin-left: 8px;
  margin-top: -7px;
}
#cart-page .basket-delivery-info{
  cursor: help;
}
#cart-page .basket-delivery-info-pop{
  right: 0;
  width: 320px;
}

/* ---------- Bottom action buttons ---------- */
#cart-page .basket-button-row{
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}
#cart-page .basket-button-row .button-row__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}
#cart-page .basket-button-row .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-13);
  letter-spacing: .02em;
  text-transform: uppercase;
}
#cart-page .basket-button-row .button--sub{
  background: url('../images-new/button_continue_shopping.png') center / 100% 100% no-repeat;
  color: #09347b;
  font-size: 12px;
  font-weight: 700;
  border: 0 !important;
  filter: brightness(1) drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
#cart-page .basket-button-row .button--sub:hover{
  box-shadow: none;
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}
#cart-page .basket-button-row .button:not(.button--sub){
  border: 0;
  background: url('/frontend/images-new/icons/see_more_bg.png') center / 100% 100% no-repeat;
  color: #fff;
}
#cart-page .basket-button-row__button-hidden{ display: none; }

/* ---------- Responsive ---------- */
@media (min-width: 1200px){
  #cart-page .basket-products .products__prices-item{ font-size: var(--fs-16); }
}
@media screen and (min-width: 640px){
  #cart-page .basket-button-row__button-hidden{ display: inline-flex; }
}
@media screen and (max-width: 1350px){
  #cart-page .basket-products .products-header-big,
  #cart-page .basket-products .products-details{ flex-basis: 60%; max-width: 60%; }
  #cart-page .basket-products__item--promotion .products-details-big{ margin-left: auto; }
}
@media screen and (max-width: 1024px){
  #cart-page .basket-products .delete-btn{ position: absolute; top: 10px; right: 10px; margin: 0; }
  #cart-page .basket-products .products-item,
  #cart-page .basket-products__item{ flex-wrap: wrap; }
  #cart-page .basket-products .products-header{ display: none; }
  #cart-page .basket-products .products-info,
  #cart-page .basket-products__info{ flex-direction: column; align-items: flex-start; min-width: 100%; }
  #cart-page .basket-products__info-title{ text-align: left; margin: 12px 0 0; }
  #cart-page .basket-products .products-details,
  #cart-page .basket-products__details{ flex: 1 1 100%; min-width: 100%; max-width: none; }
  #cart-page .basket-products__item--gift,
  #cart-page .basket-products__item-general{ max-width: 100%; }
  #cart-page .basket-products__item--promotion{ flex-direction: column; max-width: 100%; }
}

/* ============ MOBILE CART (new Figma mobile design, ≤768px) ============
   Product = white rounded card on the grey panel: image | title+price | counter+trash.
   The wrappers (.products-info / __item-general / .products-details) are flattened
   with display:contents so their children can be placed on the card grid. */
@media screen and (max-width: 768px){
  /* page title: centered, navy */
  #cart-page .basket-page-title{
    margin: 0 0 16px;
    color: var(--primary);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
  }

  /* grey panel wraps only the product cards; promo + totals become own blocks */
  #cart-page .basket-products .form1{
    padding: 5px;
    border: 1px solid rgba(174, 188, 208, .18);
    border-radius: 10px;
  }
  #cart-page .basket-products .products-list{ gap: 5px; }

  /* no column labels on mobile */
  #cart-page .basket-products .products-header-mob,
  #cart-page .basket-products__header-mob{ display: none; }
  /* code + unit-price columns hidden on mobile */
  #cart-page .basket-products .mob-hidden{ display: none; }

  /* --- product card grid --- */
  #cart-page .basket-products .products-item,
  #cart-page .basket-products__item{
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 96px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
    padding: 14px 12px;
    border-radius: 10px;
  }
  /* vertical hairline before the counter/trash column */
  #cart-page .basket-products .products-item::before,
  #cart-page .basket-products__item::before{
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    right: 114px;
    width: 1px;
    background: #e4ebf2;
  }
  /* flatten wrappers into the grid */
  #cart-page .basket-products .products-info,
  #cart-page .basket-products__info,
  #cart-page .basket-products__item-general,
  #cart-page .basket-products .products-details,
  #cart-page .basket-products__details{ display: contents; }

  /* image: left column, spans both rows */
  #cart-page .basket-products .products-info__img,
  #cart-page .basket-products__info-img{
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    flex: none;
    width: 88px;
    max-width: 88px;
    height: auto;
  }
  #cart-page .basket-products .products-info__img img,
  #cart-page .basket-products__info-img img{
    width: 88px;
    height: 88px;
    object-fit: contain;
  }

  /* title: middle column, top */
  #cart-page .basket-products .products-info__title,
  #cart-page .basket-products__info-title{
    grid-column: 2;
    grid-row: 1;
    margin: 4px 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
  }

  /* total price: middle column, under the title */
  #cart-page .basket-products .products-details > .products-details-item,
  #cart-page .basket-products__details > .basket-products__details-item{
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    white-space: normal;
  }
  /* the price spans carry the same base classes (center + nowrap) — force left/wrap */
  #cart-page .basket-products__details .basket-products__details-item-old-price,
  #cart-page .basket-products__details .basket-products__details-item-new-price{
    text-align: left;
    white-space: normal;
  }
  #cart-page .basket-products__details-item-old-price{
    display: inline-block;
    margin: 0 0 2px;
  }
  #cart-page .basket-products__details-item-new-price{
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
  }
  /* discounted line: current price goes red */
  #cart-page .basket-products__details-item:has(.basket-products__details-item-old-price) .basket-products__details-item-new-price{
    color: #f0212d;
  }

  /* counter: right column, top — bare +/- with a circled number */
  #cart-page .basket-products .counter-input-cont{
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-content: center;
    padding-top: 6px;
  }
  #cart-page .basket-products .counter-input{ gap: 6px; }
  #cart-page .basket-products .counter-input__button{
    width: 24px;
    height: 34px;
    border: 0;
  }
  #cart-page .basket-products .counter-input__element{
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #b9c4d3;
    border-radius: 50%;
    font-size: 14px;
  }

  /* trash: right column, under the counter */
  #cart-page .basket-products .delete-btn{
    position: static;
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
    align-self: start;
    margin: 0;
  }

  /* promotion gift lines span the whole card; restore their inner layout */
  #cart-page .basket-products__item--gift{
    grid-column: 1 / -1;
    display: flex;
    margin-top: 8px;
  }
  #cart-page .basket-products__item--gift .basket-products__details,
  #cart-page .basket-products__item--gift .products-details{
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
  }

  /* --- promo code: grey rounded band --- */
  #cart-page .basket-products .products__prices{
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #cart-page .basket-products .products__prices-table{
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }
  #cart-page .basket-products .basket-products__table-voucher{
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    background: #edf1f6;
    border: 1px solid rgba(174, 188, 208, .18);
    border-radius: 10px;
  }
  #cart-page .basket-products .basket-products__table-voucher tr,
  #cart-page .basket-products .basket-products__table-voucher td{
    display: block;
    padding: 0;
  }
  #cart-page .basket-products .basket-products__table-voucher-text{
    font-size: 13px;
    white-space: normal;
  }
  #cart-page .basket-products .basket-promo__field{ flex: 1 1 200px; }
  #cart-page .basket-products .basket-products__table-voucher .form__control,
  #cart-page .basket-products .basket-promo__input{ max-width: none; }

  /* --- totals: white rounded card, labels left / values right (v3) --- */
  #cart-page .basket-products .basket-products__table > tbody:last-child{
    display: block;
    flex: none;
    width: 100%;
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(219, 226, 236, .72);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(36, 59, 84, .06);
    text-align: left;
  }
  #cart-page .basket-products .basket-products__table > tbody:last-child tr{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  #cart-page .basket-products .basket-products__table > tbody:last-child .products__prices-item{
    padding: 6px 0;
    font-weight: 700;
    font-size: 14px;
  }
  #cart-page .basket-products .basket-products__table > tbody:last-child td:first-child{ text-align: left; }
  #cart-page .basket-products .basket-products__table > tbody:last-child td:last-child{ text-align: right; }
  /* v3: "Спестявате" is plain black, not green */
  #cart-page .basket-products .basket-prices-savings .products__prices-item{ color: var(--text); }
  #cart-page .basket-products .products__prices-free-delivery,
  #cart-page .basket-products .products__prices-free-delivery-success{
    margin: 4px 0;
    max-width: 100%;
    text-align: left;
  }
  /* "Общо" row: bigger, extra spacing (color comes from the base rule) */
  #cart-page .basket-products .basket-products__table > tbody:last-child tr:last-child{ margin-top: 10px; }
  #cart-page .basket-products .basket-products__table > tbody:last-child tr:last-child .products__prices-item{ font-size: 18px; }

  /* --- action buttons: stacked, centered pills --- */
  #cart-page .basket-button-row{ justify-content: center; margin-top: 24px; }
  #cart-page .basket-button-row .button-row__list{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  #cart-page .basket-button-row .button{
    width: min(280px, 100%);
    height: 52px;
    padding: 0 20px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .25);
  }
  #cart-page .basket-button-row .button--sub{
    background: url('../images-new/button_continue_shopping.png') center / 100% 100% no-repeat;
    border: 0;
    color: var(--primary);
  }
  /* the design shows "Завърши поръчката" on mobile too */
  #cart-page .basket-button-row__button-hidden{ display: inline-flex; }
}
@media screen and (max-width: 380px){
  /* very narrow phones: tighten the card grid */
  #cart-page .basket-products .products-item,
  #cart-page .basket-products__item{ grid-template-columns: 72px minmax(0, 1fr) 88px; column-gap: 10px; }
  #cart-page .basket-products .products-item::before,
  #cart-page .basket-products__item::before{ right: 104px; }
  #cart-page .basket-products .products-info__img,
  #cart-page .basket-products__info-img{ width: 72px; max-width: 72px; }
  #cart-page .basket-products .products-info__img img,
  #cart-page .basket-products__info-img img{ width: 72px; height: 72px; }
}

/* =====================================================================
   REUSABLE FORMS  (new design — palette: #09347b primary, #d1dde8 line)
   Generic form components reused across the site (contacts, etc.).
   Page-scoped rules keep higher specificity and override these bases.
   ===================================================================== */

/* --- Grid used by forms (Bootstrap-like, ported from old main.css) --- */
.custom-row{
  --gutter-x: 20px;
  --gutter-y: 24px;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--gutter-y) * -1);
  margin-right: calc(var(--gutter-x) * -.5);
  margin-left: calc(var(--gutter-x) * -.5);
}
.custom-row > *{
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) * .5);
  padding-left: calc(var(--gutter-x) * .5);
  margin-top: var(--gutter-y);
}
.column-6{ width: 50%; }
.column-12{ width: 100%; }

/* --- Field group --- */
.form__group{
  position: relative;
  margin: 0;
}
.form__label{
  display: block;
  margin: 0 0 8px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: .2px;
  text-transform: uppercase;
}
.form__required{
  color: var(--danger);
  font-size: inherit;
}

/* --- Password reveal (eye) toggle — ported from main.css --- */
.icon--24{ width: 24px; height: 24px; }
.form__group--icon .form__group-block{ position: relative; }
.form__group--icon .form__control{ padding-right: 44px; }
.form__control-btn{
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -12px;
  padding: 0;
  color: #000;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.icon--close{ display: none; }
.form__group--icon.is-open .icon--open{ display: none; }
.form__group--icon.is-open .icon--close{ display: block; }

/* --- Inputs / textareas --- */
.form__control{
  display: block;
  width: 100%;
  height: 50px;
  padding: 12px 16px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  background: #edf1f6;
  border: 1px solid #d1dde8;
  border-radius: var(--radius-sm);
  outline: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.form__control::placeholder{ color: var(--muted-2); opacity: 1; }
.form__control:hover{ background: #e4ebf2; border-color: #b8c9dd; }
.form__control:focus{
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(9, 52, 123, .12);
}
.form__control--textarea{
  height: auto;
  min-height: 148px;
  resize: vertical;
}
/* SlimSelect ползва <span class="placeholder"> за своя placeholder, който се
   сблъсква с Bootstrap .placeholder (loading skeleton: сива лента). Неутрализираме
   го само вътре в SlimSelect, за да се вижда нормален празен/текстов placeholder. */
.ss-main .placeholder{
  background-color: transparent;
  opacity: 1;
  cursor: default;
  min-height: 0;
  vertical-align: baseline;
  color: var(--muted-2);
}
/* SlimSelect: съдържанието да е центрирано вертикално в .form__control кутията
   (height:50px), за да са равни горният и долният отстъп. */
.ss-main.form__control{
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.ss-main .ss-single-selected{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.ss-main .ss-single-selected .placeholder{
  line-height: 1.2;
}
/* SlimSelect's own CSS (injected by the JS bundle) leaves .ss-content at
   `top:auto`, relying on its static position — i.e. directly under
   .ss-single-selected. That only holds while .ss-main is a block box. Because
   .ss-main.form__control above turns it into a flex container, the absolutely
   positioned .ss-content instead resolves against the container's content box
   and gets centred by align-items, landing ~107px above the field and inset by
   its padding. Pin it explicitly. */
.ss-main .ss-content{
  top: 100%;
  left: 0;
  right: auto;
}
/* SlimSelect flips upward when there is no room below; the class lands on the
   preceding .ss-single-selected, so match it as a sibling. */
.ss-main .ss-single-selected.ss-open-above + .ss-content{
  top: auto;
  bottom: 100%;
}

/* --- Checkbox / consent --- */
.form__check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.form__check-input{
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.form__check-label{
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 1.4;
  cursor: pointer;
}
.form__check-label a{ color: var(--primary); text-decoration: underline; }

.form__c1heck {
  margin-top: 15px;
}

/* --- Error state (JS toggles .has-error on the field group) --- */
.form__group.has-error .form__label{ color: var(--danger); }
.form__group.has-error .form__control{ border-color: var(--danger); }
.form__group.has-error .form__control:focus{ box-shadow: 0 0 0 3px rgba(237, 28, 36, .12); }
.field-error,
.form__error{
  display: block;
  margin-top: 6px;
  color: var(--danger);
  font-size: var(--fs-12);
  line-height: var(--lh-tight);
}

/* --- Buttons (generic pill, new design) --- */
.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 36px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .2s ease, filter .2s ease, transform .1s ease;
}
.button:hover{ box-shadow: 0 10px 22px rgba(9, 52, 123, .22); filter: brightness(1.05); }
.button:active{ transform: translateY(1px); }
.button--sub{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}
.button--image-primary{
  width: auto;
  min-width: 240px;
  height: 51px;
  padding: 0 18px;
  background: url('../images-new/button_show_more.png') center / 100% 100% no-repeat;
  border: 0 solid transparent;
  border-width: 0 26px;
  border-image: url('../images-new/button_show_more.png') 0 26 fill / 0 26px stretch;
}
/* Image-backed submit button (contacts, careers, ...) */
.button--send{
  background: url('../images-new/icons/add_comment.png') center / 100% 100% no-repeat;
  box-shadow: 0 5px 10px rgba(12, 55, 113, .22);
}
.button--send:hover{ filter: brightness(1.05); box-shadow: 0 8px 16px rgba(12, 55, 113, .28); }

/* --- Small utilities used by the forms / contacts page --- */
.center{ text-align: center; }
.text-red{ color: var(--danger); }
.mb-middle{ margin-bottom: 35px; }
.mt-large{ margin-top: 40px; }
.pb-xs{ padding-bottom: 15px; }
.title{
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.title--s{ font-size: var(--fs-22); }

/* --- White card wrapper + mobile reset (ported) --- */
.white-box{
  background: var(--surface);
  /* border: 1px solid #e4ebf2;
  border-radius: var(--radius); */
  /* padding: 40px; */
}
.white-box-mob{ background: none; border: 0; padding: 0; }
/* Zdraven-portal (вкл. английската версия /healthcare-portal): flatten на intro кутията — без борд, радиус и падинг */
.page-zdraven-portal .white-box:not(.white-box-mob),
.page-healthcare-portal .white-box:not(.white-box-mob){
  border: none;
  border-radius: 0;
  padding: 0;
}


/* =====================================================================
   AUTH PAGE (/bg/customers/auth — вход + регистрация)
   Портнати от стария main.css с нови стойности (Figma палитра).
   Всичко е скоупнато под .auth-page, за да останат непокътнати
   глобалният .button (градиент) и .registration на профил-страницата.
   ===================================================================== */
/* Оформление: двете карти (предимства + форма) */
.auth-page .box-container{
  display: flex;
  gap: 20px;
  justify-content: center;
}
.auth-page .box-container__item{
  flex: 1;
  max-width: 707px;
}
.auth-page .box-container__item:only-child{
  width: 100%;
  max-width: 100%;
}
/* Бяла карта (глобалният .white-box държи border/radius/padding закоментирани) */
.auth-page .white-box{
  border: 1px solid #e4ebf2;
  border-radius: var(--radius);
  padding: 40px 20px;
}

/* Бутони с гланцов син PNG фон (override само за auth) */
.auth-page .button{
  background: url('../images-new/finish_order.png') center / 100% 100% no-repeat;
  color: #fff;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
.auth-page .button:hover{
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}

/* Забравена парола + „запомни ме" */
.auth-page .forgot-pass-row{
  text-align: right;
}
.auth-page .forgot-pass-link{
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--primary);
  text-decoration: none;
  background: linear-gradient(var(--primary), var(--primary)) 0 100% / 100% 1px no-repeat;
}
.auth-page .remember-me-label{
  margin-top: 12px;
}
/* Отстъп между „Запомни ме" / полетата и бутона отдолу */
.auth-page .button-row{
  margin-top: 24px;
}

/* Списък с предимства */
.auth-page .list__title{
  margin-bottom: 12px;
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.auth-page .list-container{
  display: flex;
  gap: 24px;
}
.auth-page .list-container__item{
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-page .list-container__item-li{
  position: relative;
  margin-bottom: 15px;
  padding: 3px 0 3px 27px;
  font-size: 15px;
  font-weight: 500;
}
.auth-page .list-container__item-li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 24px;
  background-color: var(--primary);
  -webkit-mask: url('../images/red-check.svg') no-repeat center center;
  mask: url('../images/red-check.svg') no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Phones: the two flex columns are too narrow for the long BG benefit labels —
   they end up unequal (left steals width, right crams) or break mid-word.
   Stack to a single full-width column instead. */
@media (max-width: 575.98px){
  .auth-page .list-container{ flex-direction: column; gap: 0; }
  .auth-page .list-container__item{ flex: none; }
}

.auth-page .form__fields.hidden{
  display: none;
}

.auth-page .form-header{
  margin-bottom: 20px;
  margin-top: 20px;
}
.auth-page .form-header__title{
  margin-bottom: 12px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: 600;
  text-transform: uppercase;
}
.auth-page .form-header__btns{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.auth-page .form-header__btns .form__check{
  align-items: center;
}


.auth-page .registration .form__fields{
  margin-top: 30px;
}

.auth-page .form__fields[data-select-block-group]{
  margin-bottom: 24px;
}
.auth-page .registration .form__terms-check{
  margin-top: 15px;
}
.auth-page .registration .form__terms-check > div{
  margin: 0 0 12px;
}
.auth-page .form__terms-check-link{
  color: var(--primary);
  text-decoration: underline;
  font-size: 13px;
  font-weight: 700;
}
.auth-page .accent-block{
  padding: 20px;
  border-radius: 10px;
  background: #edf1f6;
}
.auth-page .accent-block--small{
  padding: 13px 20px 20px 13px;
}

/* Респонсив */
@media (max-width: 991.98px){
  .auth-page .box-container{
    flex-direction: column;
    align-items: center;
  }
  .auth-page .box-container__item{
    width: 100%;
  }
  .auth-page .registration .form__terms-check{
    margin-top: 44px;
  }
}


/* =====================================================================
   404 PAGE
   ===================================================================== */
.error-cont{
  position: relative;
  max-width: 1408px;
  margin-inline: auto;
  padding: clamp(88px, 10vw, 144px) 24px;
  overflow: hidden;
  border: 1px solid #e4ebf2;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.error-cont > .wrapper{
  position: relative;
}
.error-cont .img-bgr{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.error-cont .img-bgr .icon{
  position: absolute;
  max-width: none;
}
.error-cont .img-bgr .img-left{
  top: -145px;
  left: -350px;
}
.error-cont .img-bgr .img-right{
  right: -150px;
  bottom: -135px;
}
.error-cont .upper-index{
  position: relative;
  z-index: 1;
}
.error-cont__text{
  margin: 0 0 12px;
  color: var(--primary);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: var(--lh-normal);
}
.error-cont__title{
  margin: 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(80px, 10vw, 132px);
  font-weight: 800;
  line-height: .9;
}
.error-cont__info{
  margin: 20px 0 0;
  color: var(--text);
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-normal);
}
.error-cont__btn{
  margin-top: 40px;
}
.error-cont__btn .button-row__list{
  display: flex;
  justify-content: center;
}
.error-cont__btn .button{
  width: auto;
  min-width: 240px;
  height: 51px;
  padding: 0 18px;
  background: url('../images-new/button_show_more.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
.error-cont__btn .button:hover{
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}
@media (max-width: 767.98px){
  .error-cont{
    padding: 72px 16px 80px;
  }
  .error-cont .img-bgr{
    display: none;
  }
  .error-cont__text{
    font-size: var(--fs-14);
  }
  .error-cont__info{
    margin-top: 16px;
    font-size: var(--fs-16);
  }
  .error-cont__btn{
    margin-top: 32px;
  }
  .error-cont__btn .button{
    width: 100%;
    min-width: 0;
    max-width: 280px;
  }
}


/* =====================================================================
   CONTACTS PAGE
   ===================================================================== */

.contacts-form-section{
  background: #f8f8f8;
  border-radius: var(--radius);
}

.contacts-form-section .section-arrow-divider__circle {
  margin-top: -50px;
}

.contacts-form-section__arrow{
  --section-bg: #f8f8f8;
}
.contacts-form-section__box.white-box{
  padding: 0 0 62px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.contacts-form-section .wrapper--xs{
  width: min(100% - 16px, 860px);
  max-width: 860px;
  padding-bottom: 0 !important;
}
.contacts-form-section .wrapper--xs.mt-large{
  margin-top: 0 !important;
}
.contacts-form-section .title--s{
  margin: 28px 0 28px;
  color: var(--primary);
  font-size: 30px;
  line-height: 1.25;
  text-align: center;
  font-weight: 400;
  text-transform: none;
}
.contacts__form-card{
  width: min(100%, 960px);
  min-height: 410px;
  margin: 0 auto;
  padding: 38px 40px 36px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}
.contacts__form-card .form__fields{
  --gutter-x: 24px;
  --gutter-y: 18px;
}
.contacts__form-card .form__fields > .column-12:nth-child(1),
.contacts__form-card .form__fields > .column-12:nth-child(2){
  width: 50%;
}
.contacts__form-card .form__fields > .column-12:nth-child(3),
.contacts__form-card .form__fields > .column-12:nth-child(4),
.contacts__form-card .form__fields > .column-12:nth-child(5),
.contacts__form-card .form__fields > .column-12:nth-child(6){
  width: 100%;
}
.contacts__form-card .form__group{
  margin: 0;
}
.contacts__form-card .form__label{
  display: block;
  margin: 0 0 7px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}
.contacts__form-card .form__required{
  color: inherit;
  font-size: inherit;
}
.contacts__form-card input.form__control,
.contacts__form-card textarea.form__control{
  display: block;
  width: 100%;
  height: 50px;
  padding: 8px 12px;
  color: #232323;
  font: inherit;
  background: #f8f8f8;
  border: 1px solid #b7b7b7;
  border-radius: 8px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contacts__form-card input.form__control::placeholder,
.contacts__form-card textarea.form__control::placeholder{
  color: #777777;
  opacity: 1;
}
.contacts__form-card input.form__control:hover,
.contacts__form-card textarea.form__control:hover{
  background: #f8f8f8;
  border-color: #b7b7b7;
}
.contacts__form-card input.form__control:focus,
.contacts__form-card textarea.form__control:focus{
  background: #f8f8f8;
  border-color: #16478b;
  box-shadow: 0 0 0 3px rgba(22, 71, 139, .12);
}
.contacts__form-card input.form__control:-webkit-autofill,
.contacts__form-card input.form__control:-webkit-autofill:hover{
  -webkit-text-fill-color: #232323;
  box-shadow: 0 0 0 1000px #f8f8f8 inset;
}
.contacts__form-card input.form__control:-webkit-autofill:focus{
  -webkit-text-fill-color: #232323;
  box-shadow: 0 0 0 1000px #f8f8f8 inset, 0 0 0 3px rgba(22, 71, 139, .12);
}
.contacts__form-card .form__control--textarea{
  min-height: 114px;
  height: 114px;
  resize: vertical;
}
.contacts__form-card .form__check{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 31px;
}
.contacts__form-card .form__check-input{
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0 0 7px;
  accent-color: #16478b;
}
.contacts__form-card .form__check-label{
  color: #000;
  font-size: 14px;
  line-height: 1.35;
}
.contacts__form-card .contacts__form-cta{
  display: flex;
  justify-content: start;
  gap: 10px;
  margin-top: 18px;
}
.contacts__form-card .button--send{
  width: auto;
  min-width: 120px;
  height: 50px;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 700;
  border: 0;
  border-radius: 22px;
}
.contacts__boxes{
  max-width: 762px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}
.contacts__boxes-item{
  flex: 1;
  padding: 22px 28px;
  background: var(--surface);
  /* border: 1px solid #e4ebf2; */
  border-radius: var(--radius-sm);
  text-align: center;
}
.contacts__boxes-phone{
  display: inline-block;
  margin-bottom: 8px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.contacts__boxes-time{
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: 1.5;
}
.contacts__form-cta{
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.contacts-form-section__arrow.section-arrow-divider {
  margin-top: 0;
} 

@media (max-width: 768px){
  .contacts-form-section{
    margin-inline: 6px;
  }
  .contacts-form-section .section-arrow-divider__circle {
    margin-top: -30px;
  }

  .contacts-form-section__box.white-box{
    padding-bottom: 42px;
  }
  .contacts-form-section .title--s{
    margin-bottom: 20px;
    font-size: 24px;
  }
  .contacts__boxes{
    padding: 8px;
  }
  .contacts__form-card{
    padding: 28px 28px;
  }
  .contacts__form-card .form__fields > .column-12:nth-child(1),
  .contacts__form-card .form__fields > .column-12:nth-child(2),
  .contacts__form-card .form__fields > .column-12:nth-child(3),
  .contacts__form-card .form__fields > .column-12:nth-child(4),
  .contacts__form-card .form__fields > .column-12:nth-child(5),
  .contacts__form-card .form__fields > .column-12:nth-child(6){
    width: 100%;
  }
  .contacts__boxes{
    flex-direction: column;
    max-width: 472px;
  }
  /* .white-box{ padding: 28px 20px; } */
  /* .contacts__form-cta .button{ width: 100%; } */
}








/* Global AJAX loader (used by window.StudioX.Loader). */
.loader,
.loader.hidden,
.loader.is-hidden{
  transition: visibility 250ms ease, opacity 250ms ease;
}

.loader{
  position: fixed;
  inset: 0;
  z-index: 9999999999;
  background-color: rgba(0, 0, 0, .2);
  visibility: visible;
  opacity: 1;
}

.loader.hidden,
.loader.is-hidden{
  visibility: hidden;
  opacity: 0;
}

.loader.hidden::before,
.loader.hidden::after,
.loader.is-hidden::before,
.loader.is-hidden::after{
  animation: none;
}

.loader::before,
.loader::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1112;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  margin-left: -24px;
  border: 4px solid #fff;
  border-left-color: #0080ff;
  border-radius: 50%;
  animation: loading 1s ease infinite;
}

.loader::after{
  z-index: 1113;
  border-color: transparent transparent transparent #0080ff;
  animation: loading .75s ease infinite;
}

@keyframes loading{
  0%{ transform: rotate(0); }
  100%{ transform: rotate(360deg); }
}

/* =====================================================================
   BROCHURES LIST
   ===================================================================== */
.brochures-list .news-cont{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 32px;
  margin-top: 33px;
}
.brochures-list .news-item{
  display: flex;
  flex-direction: column;
  width: calc(25% - 24px);
  margin-bottom: 0;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(15,23,42,0.10);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.brochures-list .news-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(15,23,42,0.15);
}
.brochures-list .news-item__link{
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 0 20px;
  text-align: left;
  text-decoration: none;
  background: #edf1f6;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.brochures-list .news-item__img{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.brochures-list .news-item__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brochures-list .news-item__title{
  display: block;
  margin: 16px 0 0;
  padding: 0 20px;
  color: #09347b;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}
.brochures-list .news-item__date{
  display: block;
  margin: 6px 0 0;
  padding: 0 20px;
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.brochures-list .news-item__arrow{
  margin-top: auto;
  padding: 16px 20px 0;
  color: #ff383c;
  fill: #ff383c;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 250ms ease;
}
.brochures-list .news-item:hover .news-item__arrow{
  text-decoration-color: currentColor;
}
@media (max-width: 1024px){
  .brochures-list .news-item{ width: calc(50% - 16px); }
}
@media (max-width: 768px){
  .brochures-list .news-cont{ gap: 17px; }
  .brochures-list .news-item{ width: calc(50% - 8px); }
  .brochures-list .news-item__link{ padding-bottom: 15px; }
  .brochures-list .news-item__title{ margin-top: 15px; font-size: 16px; font-weight: 700; line-height: 24px; }
  .brochures-list .news-item__date{ font-size: 14px; }
  .brochures-list .news-item__arrow{ padding-top: 12px; }
}
@media (max-width: 600px){
  .brochures-list .news-item{ width: 100%; }
}
@media (max-width: 575.98px){
  #brochures-form .category-filter-form__select,
  #brochures-form .category-filter-form__select--sort{
    min-width: 120px;
  }
}

/* =====================================================================
   BROCHURE DETAIL — scoped
   ===================================================================== */
.brochure-inner{
  padding: 32px;
  background: var(--surface);
  border-radius: var(--radius);
}
.brochure-inner > .text h1{
  margin: 0 0 20px;
  color: var(--primary);
  font-size: var(--fs-22);
  font-weight: 600;
  line-height: var(--lh-tight);
}
.brochure-inner .news-item--big{
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.brochure-inner .news-item__cont-img{
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius);
  overflow: hidden;
}
.brochure-inner .news-item__cont-img img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 768px){
  .brochure-inner{ padding: 20px; }
}

/* =====================================================================
   PROFILE PAGE (/bg/my/...) — scoped, Figma redesign (node 2194-222)
   ===================================================================== */
.profile-page{ background: #f5f8f8; }
.profile-page .section{ background: #f5f8f8; }
.profile-page .white-box{
  max-width: 1200px;
  margin-inline: auto;
  padding: 40px 48px;
  background: #fff;
  border: 0;
  border-radius: 10px;
}

/* Fast order product search */
.profile-page .fast-order-search{
  text-align: center;
}
.profile-page .fast-order-search .search-inline__box{
  position: relative;
  width: 100%;
  max-width: 555px;
  margin-inline: auto;
}
.profile-page .fast-order-search .search-inline__input{
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 56px 0 20px;
  border: 1px solid #d1dde8;
  border-radius: 25px;
  outline: 0;
  background: #edf1f6;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-14);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.profile-page .fast-order-search .search-inline__input:hover{
  border-color: #b8c9dd;
  background: #e4ebf2;
}
.profile-page .fast-order-search .search-inline__input:focus{
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(9, 52, 123, .12);
}
.profile-page .fast-order-search .search-btn{
  position: absolute;
  top: 50%;
  right: 6px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  filter: none;
  transform: translateY(-50%);
  box-shadow: none;
}
.profile-page .fast-order-search .search-btn:hover{
  background: #dbe4ee;
  filter: none;
  box-shadow: none;
}
.profile-page .fast-order-search .search-btn:active{
  transform: translateY(-50%);
}
.profile-page .fast-order-search .search-btn-icon{
  width: 21px;
  height: 21px;
  fill: currentColor;
}

/* --- Tab navigation: full-width white bar; active tab merges into the band --- */
.profile-page .profile-tabs-bar{ background: #fff; }
.profile-page .fake-tabs{ margin: 0; }
.profile-page .fake-tabs select{ display: none; }
.profile-page .fake-tabs ul{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0 24px;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
}
.profile-page .fake-tabs li{ list-style: none; }
.profile-page .fake-tabs a{
  display: inline-block;
  padding: 18px;
  color: #000;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 10px 10px 0 0;
  transition: color .2s ease, background-color .2s ease;
}
.profile-page .fake-tabs a:hover{ color: var(--primary); }
.profile-page .fake-tabs a.is-active{
  font-size: 14px;
  font-weight: 700;
  background: #F6F4F4;
}

/* ==== Профил: Съобщения (пощенска кутия) — дизайн 1:1 по Figma node 2317:418 ==== */
/* Badge за брой непрочетени — червено кръгче в горния десен ъгъл на таба (по Figma) */
.profile-page .fake-tabs a:has(.profile-tab__badge){ position: relative; overflow: visible; }
.profile-tab__badge{
  position: absolute;
  top: -2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff383c;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* Празно състояние */
.messages-empty{ font-size: 15px; color: #000; }

/* Таблица със съобщения */
.messages{ width: 100%; }
.messages__head,
.messages__row{
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 190px 56px;
  column-gap: 24px;
  align-items: center;
}
.messages__head{
  min-height: 42px;
}
.messages__head .messages__col{
  color: #274182;
  font-size: 15px;
  font-weight: 700;
}
.messages__head .messages__col--status{ padding-left: 16px; }

.messages__row{
  min-height: 40px;
  cursor: pointer;
}
/* Зебра: сивите редове са нечетните СЪОБЩЕНИЯ. Header-ът е първи child,
   затова nth-child(even) сред всички деца = 1-во, 3-то, 5-то съобщение. */
.messages__item:nth-child(even) .messages__row{
  background: #f6f8fa;
  border-radius: 5px;
}
.messages__row .messages__col--status{
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.messages__row .messages__col--subject,
.messages__row .messages__col--date{
  font-size: 15px;
  font-weight: 400;
  color: #000;
}
.messages__item--unread .messages__col--subject,
.messages__item--unread .messages__col--date{
  font-weight: 700;
}
.messages__status-icon{ display: block; margin-left: auto; margin-right: auto; }
.messages__status-icon--read{ opacity: .2; }

.messages__col--actions{
  display: flex;
  align-items: center;
}
.messages__delete{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.messages__delete img{ display: block; }

.messages__body{
  padding: 8px 32px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
}

@media (max-width: 768px){
  .messages__head .messages__col{
    font-size: 13px;
  }

  .messages__head,
  .messages__row{
    grid-template-columns: 63px minmax(0, 1fr) auto 40px;
    column-gap: 12px;
    padding-top: 8px; padding-bottom: 8px;
  }

  .messages__row .messages__col--date {
    font-size: 13px;
  }

  .messages__head .messages__col--status{ padding-left: 8px; }
  .messages__row .messages__col--status{ padding-left: 8px; }
  .messages__body{ padding: 8px 12px 16px; }
}

/* hide toggled edit forms (utility missing from active stylesheet) */
.profile-page .hidden{ display: none; }
/* ...но радио/чекбокс контролите не бива да се крият: JS (jsSelectsBackend)
   добавя `hidden` и на .form__check-input от групата, а те трябва да се виждат */
.profile-page .form__check-input.hidden{ display: inline-block; }

/* „Добави нов адрес" бутон (адаптиран от main.css към новия дизайн) */
.profile-page .adress-add{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 30px;
  padding: 22px 0;
  border: 0;
  border-radius: var(--radius);
  background: #edf1f6;
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}
.profile-page .adress-add:hover{ background: #e4ebf2; }
.profile-page .adress-add__icon{
  width: 20px;
  height: 20px;
  fill: var(--primary);
  transition: transform .25s ease;
}
.profile-page .adress-add__icon-rotate{ transform: rotate(45deg); }

/* „Запиши" (save бутоните в центрирани редове) с гланцов син image фон */
.profile-page .button-row--center .button{
  background: url('../images-new/icons/add_comment.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
.profile-page .button-row--center .button:hover{
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}
.profile-page .button-row--center .button.button--image-primary.button--sub{
  background: url('../images-new/to_cart_bg.png') center / 100% 100% no-repeat;
  border-image: url('../images-new/to_cart_bg.png') 0 26 fill / 0 26px stretch;
  color: var(--primary);
}
/* Loyalty-card buttons (Заяви дигитална карта / Дигитализирай пластика):
   drop the 26px border-image caps — their soft transparent edges rendered a
   white halo over the light page bg. The stretched background + base
   border-radius:999px draw the pill cleanly on their own. */
.profile-page .card-info .button-row--center .button.button--image-primary{
  border-width: 0;
}

/* --- Data area (Лични данни / Достъп) --- */
.profile-page .registration .wrapper{ max-width: 1034px; margin-inline: auto; }
.profile-page .preview__info{ position: relative; }
.profile-page .preview__info .title,
.profile-page .preview__info h2{
  margin: 0 0 12px;
  color: #274182;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
}
.profile-page .preview__info.mt-large{
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #e4ebf2;
}
.profile-page .grey-box-sm{
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
}

/* zebra rows: label left, value right */
.profile-page .grey-box-sm .table--mob{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.profile-page .grey-box-sm .table--mob tr{ height: 45px; }
.profile-page .grey-box-sm .table--mob tr:nth-child(odd) td{ background: #f6f8fa; }
.profile-page .grey-box-sm .table--mob tr:nth-child(odd) td:first-child{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.profile-page .grey-box-sm .table--mob tr:nth-child(odd) td:last-child{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.profile-page .grey-box-sm .table--mob td{
  padding: 8px 20px;
  color: #000;
  font-size: 15px;
  vertical-align: middle;
}
.profile-page td.preview__info-label{ text-align: left; white-space: nowrap; }
.profile-page td.preview__info-text{ text-align: right; }

/* password dots */
.profile-page .preview__info-text .dot{
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 3px;
  border-radius: 50%;
  background: #000;
  vertical-align: middle;
}

/* edit (pencil) toggle top-right */
.profile-page .grey-box-sm .edit-icon{
  position: absolute;
  top: -32px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309347b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 20h9'/%3e%3cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3e%3c/svg%3e") center / 18px no-repeat;
  opacity: .75;
  transition: opacity .2s ease;
}
.profile-page .grey-box-sm .edit-icon:hover{ opacity: 1; }

/* --- Bottom controls (delete / logout) — full-width white bar --- */
.profile-page .profile-controls{ background: #fff; padding: 48px 0; }
.profile-page .profile-controls .buttons-row--center{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.profile-page .button-outline,
.profile-page .button-outline-2{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* min-width: 240px; */
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 50px;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.25);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.profile-page .button-outline{
  background: url('/frontend/images-new/delete_account.png') center / 100% 100% no-repeat;
  color: #09347b;
  padding-right: 54px; /* clear the trash icon baked into the right of the image */
}
.profile-page .button-outline .icon,
.profile-page .button-outline-2 .icon{ display: none; } /* icons are baked into the images */
.profile-page .button-outline-2{
  background: url('/frontend/images-new/sign_out.png') center / 100% 100% no-repeat;
  color: #fff;
  padding-right: 54px; /* clear the sign-out arrow baked into the right of the image */
}
.profile-page .button-outline:hover,
.profile-page .button-outline-2:hover{ box-shadow: 0 3px 9px rgba(0,0,0,0.28); }
.profile-page .button-outline .icon,
.profile-page .button-outline-2 .icon{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --- Edit form: checkboxes (row gap + label vertically centered, stays beside on mobile) --- */
.profile-page .form__check{
  flex-direction: row;
  align-items: center;
}
.profile-page .form__group:has(> .form__check){ margin-bottom: 10px; }
.profile-page .registration .accent-block .form__check-label,
.profile-page .registration .accent-block + .form__group .form__check-label{
  flex: 1;
  /* text-align: center; */
}

/* --- Edit form: save button row (center + top spacing) --- */
.profile-page .button-row{ display: flex; }
.profile-page .button-row--center{ justify-content: center; }
.profile-page .button-row__list{ display: flex; gap: 12px; }
.profile-page .card-info > .button-row{
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 48px;
  margin-bottom: 48px;
}
.profile-page .card-info > .button-row .button-row__list{ margin-bottom: 0; }
.profile-page .mt-middle{ margin-top: 24px; }

@media (max-width: 768px){
  .profile-page .white-box{ padding: 24px 16px; }
  .profile-page .fake-tabs{ padding: 16px 0; }
  .profile-page .fake-tabs ul{ display: none; }
  .profile-page .fake-tabs select{
    display: block;
    width: 100%;
    height: 50px;
    padding: 8px 44px 8px 16px;
    color: #09347b;
    font-family: var(--font-sans);
    font-size: 14px;
    background: #edf1f6;
    border: 1px solid #d1dde8;
    border-radius: 50px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2309347b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px 14px;
  }
  .profile-page .preview__info .title,
  .profile-page .preview__info h2{ text-align: center; }
  .profile-page .grey-box-sm .table--mob td{ padding: 8px 12px; font-size: 14px; }
  .profile-page .profile-controls .buttons-row--center{
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .profile-page .card-info > .button-row{
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  /* Стекнати и центрирани, но с ограничена ширина — PNG-тата с „запечена"
     иконка се разтягат грозно при пълна ширина, затова ги ограничаваме. */
  .profile-page .button-outline,
  .profile-page .button-outline-2{ width: 100%; max-width: 250px; min-width: 0; }
}

/* Labels here are long ("Име Презиме и Фамилия:", "Дата на раждане:") and the
   values can be a full address, so the two-column table overflows the viewport
   on phones. Stack label над value instead of shrinking the columns
   (same treatment as .checkout-page .preview). */
@media (max-width: 575.98px){
  .profile-page .grey-box-sm .table--mob,
  .profile-page .grey-box-sm .table--mob tbody,
  .profile-page .grey-box-sm .table--mob tr,
  .profile-page .grey-box-sm .table--mob td{ display: block; width: 100%; }
  .profile-page .grey-box-sm .table--mob tr{ height: auto; margin-bottom: 4px; }
  .profile-page .grey-box-sm .table--mob td{ padding: 6px 14px; font-size: 14px; }
  .profile-page td.preview__info-label{
    white-space: normal;
    padding-bottom: 0;
    font-weight: 700;
  }
  .profile-page td.preview__info-text{ text-align: left; padding-top: 0; }
  .profile-page .grey-box-sm .table--mob tr:nth-child(odd) td:first-child{
    border-radius: 5px 5px 0 0;
  }
  .profile-page .grey-box-sm .table--mob tr:nth-child(odd) td:last-child{
    border-radius: 0 0 5px 5px;
  }
}

/* =====================================================================
   ORDER HISTORY (История на поръчки) — accordion of orders + product table
   Ported from main.css and restyled to the new profile design.
   Scoped under .profile-page so it never collides with the
   #cart-page .basket-products rules that reuse the same .products* classes.
   ===================================================================== */

/* small utilities missing from the active stylesheet (used by this markup) */
.profile-page .bold{ font-weight: 700; }
.profile-page .mb-l{ margin-bottom: 24px; }

/* --- Accordion shell --- */
.profile-page .profile-accordion{ margin: 0; }
.profile-page .accordion__item{ position: relative; }

/* --- Collapsed order row (header/trigger) --- */
.profile-page .accordion__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 4px 16px 4px 40px;
  cursor: pointer;
  border-bottom: 1px solid #e4ebf2;
}
/* open order: the bordered product box below supplies the separator */
.profile-page .accordion__item.is-active .accordion__header{ border-bottom-color: transparent; }
.profile-page .profile-accordion__orders{
  flex: 1;
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
/* Колоните да се оразмеряват по съдържание и да се разпъват по ширината,
   а „етикет: стойност" да не се пренася на нов ред. */
.profile-page .profile-accordion__td{ text-align: left; padding: 0 32px 0 0; vertical-align: middle; white-space: nowrap; }
.profile-page .profile-accordion__td:last-child{ padding-right: 0; }
@media (min-width: 992px){
  .profile-page .profile-accordion__orders,
  .profile-page .profile-accordion__orders tbody{ display: block; width: 100%; min-width: 0; }
  .profile-page .profile-accordion__orders tr{
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.9fr);
    align-items: center;
    gap: 16px;
  }
  .profile-page .profile-accordion__td{ padding: 0; }
}
@media (min-width: 769px) and (max-width: 991.98px){
  .profile-page .profile-accordion__orders,
  .profile-page .profile-accordion__orders tbody,
  .profile-page .profile-accordion__orders tr{ display: block; width: 100%; }
  .profile-page .profile-accordion__td{ display: block; width: auto; padding: 0; }
  .profile-page .profile-accordion__text{ margin: 6px 0; }
}
.profile-page .profile-accordion__text{
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.profile-page .profile-accordion__text-info{ margin-left: 6px; }
/* the sum span carries .text-red.bold in markup — keep it regular unless the item is open */
.profile-page .accordion__item:not(.is-active) .profile-accordion__text-info.bold{ font-weight: 400; }
/* open order: whole summary row goes bold (matches Figma top item) */
.profile-page .accordion__item.is-active .profile-accordion__text{ font-weight: 700; }

/* --- Circular chevron button --- */
.profile-page .accordion__header-button{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #d1dde8;
  border-radius: 50%;
  transition: transform .25s ease;
}
.profile-page .accordion__header-button-icon{
  width: 12px;
  height: 12px;
  fill: #5a729a;
}
/* icon renders a down chevron by default; flip it up when the order is open */
.profile-page .accordion__item.is-active .accordion__header-button{ transform: rotateZ(180deg); }

/* --- Expanded body (JS toggles/animates height) --- */
.profile-page .accordion__body{ display: none; }
.profile-page .profile-accordion__body-inner{ padding: 6px 0 8px; }

/* --- Shipping address band, inside the bordered product box (Figma: 8px inset) --- */
.profile-page .profile-accordion__address{
  /* -32px cancels the 40px side padding of .products-border, leaving the 8px inset */
  margin: 6px -32px 12px;
  padding: 25px 40px;
  background: #f6f8fa;
}
.profile-page .profile-accordion__address-text{
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.profile-page .profile-accordion__address-text strong{ font-weight: 700; }

/* --- Product table inside an open order --- */
.profile-page .products-border{
  border: 1px solid #e4ebf2;
  padding: 0 40px;
  background: #fff;
}

/* column headers: Количество / Ед.цена / Сума */
.profile-page .products-header{
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;
  border-bottom: 1px solid #e4ebf2;
}
.profile-page .products-header-mob{ display: none; }
.profile-page .products-header-item{
  width: 128px;
  margin: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}
/* Figma: "Количество" centered over the qty column; "Ед.цена"/"Цена" left-aligned
   so their left edge lines up with the price values below them. */
.profile-page .products-header-big .products-header-item{ text-align: left; }
.profile-page .products-header-big .products-header-item:first-child{ text-align: center; }

/* product rows */
.profile-page .products-list{ display: block; }
.profile-page .products-item{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e4ebf2;
}
.profile-page .products-item:last-child{ border-bottom: none; }
.profile-page .products-info{
  display: flex;
  flex: 1;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.profile-page .products-info__img{
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}
.profile-page .products-info__img img{ width: 100%; height: 100%; object-fit: contain; }
.profile-page .products-info__title{
  margin: 0;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
.profile-page .products-details.products-details-big{
  display: flex;
  flex: 0 0 384px;
  width: 384px;
  gap: 0;
  margin: 0;
}
.profile-page .products-details-item{
  flex: 1;
  margin: 0;
  color: #000;
  font-size: 12px;
  text-align: center;
}
/* qty centered; the two price columns left-aligned (mirrors the header labels) */
.profile-page .products-details-big > .products-details-item{ text-align: left; }
.profile-page .products-details-big > .products-details-item:first-child{ text-align: center; }
.profile-page .basket-products__details-item{ white-space: nowrap; }
/* Order-history red matches Figma's Accents/Red (#ff383c), scoped so the global
   --danger token and other profile pages keep the site red. Covers the struck
   old prices and the order sum (which uses the shared .text-red utility). */
.profile-page .profile-accordion .text-red{ color: #ff383c; }
/* discount price stacking: struck old price (red) above the new (current) price.
   Old-price span only renders when the line hasDiscount(); non-discounted lines
   show just the single new-price span. */
.profile-page .basket-products__details-item-old-price{
  display: block;
  margin-bottom: 2px;
  color: #ff383c;
  text-decoration: line-through;
}
.profile-page .basket-products__details-item-new-price{ display: block; color: #000; text-decoration: none; }

/* --- Totals block (right aligned) --- */
.profile-page .products__prices{ padding: 20px 0 0; }
.profile-page .products__prices-table{
  margin-left: auto;
  border-collapse: collapse;
}
.profile-page .products__prices-right{ margin-left: auto; }
.profile-page .products__prices-item{
  padding: 0 0 0 24px;
  color: #000;
  font-size: 14px;
  line-height: 32px; /* Figma: 32px row rhythm in the totals block */
  text-align: right;
  white-space: nowrap;
}
.profile-page .products__prices-item:first-child{ padding-left: 0; }
.profile-page .products__prices-table tr:last-child .products__prices-item{ font-weight: 700; }

/* add-to-cart / pay button row */
.profile-page .products__prices .button-row{ margin-top: 20px; }
.profile-page .button-row--end{ justify-content: flex-end; }

/* add-to-cart pill: navy background asset + cart icon (like the product page) */
.profile-page .js-add_multiple_to_basket{
  gap: 10px;
  background: url('../images-new/icons/add_to_cart_icon.png') center / 100% 100% no-repeat;
}
.profile-page .js-add_multiple_to_basket .icon{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* pagination spacing */
.profile-page .profile-accordion .pt-m{ padding-top: 24px; }

/* empty state ("Нямате завършени поръчки") */
.profile-page .white-box > div:only-child{ color: #000; font-size: 14px; }

@media (max-width: 768px){
  .profile-page .accordion__header{
    align-items: flex-start;
    padding: 10px 12px 10px 16px;
  }
  .profile-page .profile-accordion__orders,
  .profile-page .profile-accordion__orders tbody,
  .profile-page .profile-accordion__orders tr{ display: block; width: 100%; }
  .profile-page .profile-accordion__td{ display: block; width: auto; }
  .profile-page .profile-accordion__text{ margin: 6px 0; }

  /* -8px keeps the same 8px inset against .products-border's 16px mobile padding */
  .profile-page .profile-accordion__address{ margin: 6px -8px 12px; padding: 16px; }
  .profile-page .products-border{ padding: 0 16px; }
  .profile-page .products-header-big{ display: none; }
  .profile-page .products-item{ flex-direction: column; gap: 12px; }
  .profile-page .products-info{ flex: 1 0 100%; flex-direction: column; text-align: center; }
  .profile-page .products-info__title{ text-align: center; }

  /* mobile: labels row above the values; unit-price column is hidden by .mob-hidden,
     so drop its matching label to keep the two remaining columns aligned */
  .profile-page .products-header-mob{ display: flex; width: 100%; margin: 0; }
  .profile-page .products-header-mob .products-header-item{ width: auto; flex: 1; }
  .profile-page .products-header-mob .products-header-item:nth-child(2){ display: none; }
  .profile-page .mob-hidden{ display: none; }
  .profile-page .products-details.products-details-big{ flex: 1 0 100%; width: 100%; }
  /* re-center columns on mobile (desktop left-aligns the price columns) */
  .profile-page .products-details-big > .products-details-item{ text-align: center; }

  .profile-page .products__prices-table{ width: 100%; }
  /* let the label cell wrap and trim the column gap so the totals table
     honours width:100% instead of overflowing the viewport (nowrap values) */
  .profile-page .products__prices-item{ padding-left: 12px; }
  .profile-page .products__prices-item:first-child{ white-space: normal; }
}

@media (max-width: 350px){
  .profile-page .profile-accordion__td{ text-align: left; padding: 0 5px 0 0; }
}
/* =====================================================================
   DATE PICKER (js-datepicker / .qs-*) — ported from main.css, Subra palette
   ===================================================================== */
.qs-datepicker-container{
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 16.5em;
  z-index: 9001;
  overflow: hidden;
  color: #000;
  font-family: var(--font-sans);
  font-size: 1rem;
  background: #fff;
  border: 1px solid #d1dde8;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
  user-select: none;
}
.qs-centered{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.qs-hidden{ display: none; }

/* header controls */
.qs-controls{
  display: flex;
  width: 100%;
  flex: 1 0 auto;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  background: #edf1f6;
  transition: filter .3s;
}
.qs-controls.qs-blur{ filter: blur(5px); }
.qs-arrow{
  position: relative;
  width: 1.75em;
  height: 1.75em;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s;
}
.qs-arrow:hover{ background: rgba(9, 52, 123, .10); }
.qs-arrow:after{ content: ""; position: absolute; top: 50%; border: .39em solid transparent; }
.qs-arrow.qs-left:after{ right: 50%; transform: translate(25%, -50%); border-right-color: #09347b; }
.qs-arrow.qs-right:after{ left: 50%; transform: translate(-25%, -50%); border-left-color: #09347b; }
.qs-month-year{
  color: #09347b;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border .2s;
}
.qs-month-year:not(.qs-disabled-year-overlay){ cursor: pointer; }
.qs-month-year:not(.qs-disabled-year-overlay):hover{ border-bottom: 1px solid #09347b; }
.qs-month-year:focus{ outline: 0; }
.qs-month{ padding-right: .5ex; }
.qs-year{ padding-left: .5ex; }

/* day grid */
.qs-squares{
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
  transition: filter .3s;
}
.qs-squares.qs-blur{ filter: blur(5px); }
.qs-square{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 7);
  height: 2em;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .1s;
}
.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{ background: #edf1f6; }
.qs-current{ font-weight: 700; text-decoration: underline; }
.qs-active{ background: #09347b; color: #fff; }
.qs-outside-current-month{ opacity: .3; }
.qs-disabled{ cursor: not-allowed; opacity: .3; }
.qs-empty{ cursor: default; }
.qs-day{ color: var(--muted-2); font-weight: 600; cursor: default; }

/* year / month overlay */
.qs-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: .5em;
  color: #fff;
  background: rgba(9, 52, 123, .94);
  z-index: 1;
  opacity: 1;
  transition: opacity .3s;
}
.qs-overlay.qs-hidden{ opacity: 0; z-index: -1; }
.qs-overlay .qs-overlay-year{
  display: block;
  width: 80%;
  margin: 0 auto;
  padding: .25em 0;
  color: #fff;
  font-size: .875em;
  text-align: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
  border-radius: 0;
}
.qs-overlay .qs-overlay-year::-webkit-inner-spin-button{ -webkit-appearance: none; }
.qs-overlay .qs-close{ position: absolute; top: 0; right: 0; padding: .5em; cursor: pointer; }
.qs-overlay .qs-submit{
  margin: 8px auto auto;
  padding: 6px 14px;
  cursor: pointer;
  background: rgba(255, 255, 255, .15);
  border: 1px solid #fff;
  border-radius: 6px;
}
.qs-overlay .qs-submit.qs-disabled{ color: #c9d2dc; border-color: #c9d2dc; cursor: not-allowed; }
.qs-overlay .qs-overlay-month-container{ display: flex; flex-wrap: wrap; flex-grow: 1; }
.qs-overlay .qs-overlay-month{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 3);
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s;
}
.qs-overlay .qs-overlay-month:hover{ opacity: 1; }

/* =====================================================================
   TOAST NOTIFICATIONS (toastr) — ported from old main.css, restyled to the
   new palette. Two families both live under #toast-container.toast-top-right:
   A) simple text toast (flashMsg success/error):
      .toast.toast-success|.toast-error > .toast-message
        > .toast-icon[.toast-icon--error] (svg) + text  + .toast-close-button
      The status icon is a REAL .toast-icon element the JS injects (not ::before).
   B) rich info card (flashMsg template → toastr.warning):
      .toast.toast-warning > .toast-message > .toast-info(__header/__body/__footer)
        > .toast-preview(...)  + .toast-close-button
   Palette: navy #09347b, success #91bd88, error #ff0000, line #e4ebf2,
   chip #edf1f6, hover #d1dde8.
   ===================================================================== */
#toast-container{
  position: fixed;
  z-index: 9999999999;
}
#toast-container.toast-top-right{ top: 18px; right: 18px; }
#toast-container.toast-top-left{ top: 18px; left: 18px; }
#toast-container.toast-bottom-right{ right: 18px; bottom: 18px; }
#toast-container.toast-bottom-left{ left: 18px; bottom: 18px; }
#toast-container.toast-top-center{ top: 18px; left: 50%; transform: translateX(-50%); }
#toast-container.toast-bottom-center{ bottom: 18px; left: 50%; transform: translateX(-50%); }

.toast{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 360px;
  max-width: calc(100vw - 36px);
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(9, 52, 123, .14);
  font-family: var(--font-sans);
}

/* message row (holds the injected .toast-icon + the text) */
.toast-message{
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  color: #232323;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  word-wrap: break-word;
}

/* colored status icon (circle) injected inside .toast-message — mirrors the
   round elements in the mini-cart (counters, info dot, header actions). */
.toast-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: 13px;
  border-radius: 50%;
  background-color: #91bd88;
}
.toast-icon--error{
  background-color: #ff0000;
}
.toast-icon svg{
  width: 20px;
  height: 20px;
  fill: #fff;
}

.toast-title{
  display: block;
  margin-bottom: 2px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
}

.toast-close-button{
  order: 10;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color .2s ease;
}
.toast-close-button:hover{ background: #e4ebf2; }
.toast-close-button svg{
  width: 16px;
  height: 16px;
  fill: var(--primary);
}

/* --- Family B: rich info card (add to cart / favourites / compare) --- */
/* toastr wraps the card in .toast.toast-warning — neutralize that shell so the
   inner .toast-info reads as the visible card. */
.toast.toast-warning{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.toast.toast-warning .toast-message{
  display: block;
  margin: 0;
}
.toast.toast-warning .toast-close-button{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  background: var(--surface-2);
}

.toast-info{
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(9, 52, 123, .14);
  background: var(--surface);
  overflow: hidden;
}
/* soft header — centered navy text on light, like the "Количка" popup */
.toast-info__header{
  padding: 18px 46px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.toast-info__body{
  padding: 14px 18px;
}
.toast-info__footer{
  padding: 0 18px 20px;
}

.toast-preview{
  display: flex;
  justify-content: space-between;
}
.toast-preview__preview{
  flex-shrink: 0;
  width: 100%;
  max-width: 102px;
  margin-right: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.toast-preview__preview img{
  width: 100%;
  height: auto;
  object-fit: contain;
}
.toast-preview__content{
  flex-grow: 1;
  color: rgba(35, 35, 35, .7);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}
.toast-preview__text{
  margin-bottom: 8px;
}
.toast-preview__price{
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 480px){
  #toast-container.toast-top-right,
  #toast-container.toast-top-left{ top: 12px; left: 12px; right: 12px; }
  .toast{ width: 100%; }

  .customer-info--alt .customer-info__item + .customer-info__item::before {
    background: transparent;
  }
}

.brand--page{
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
  font-family: var(--font-sans);
}
.brand--page .brand__aside{
  position: sticky;
  top: 104px;
  display: grid;
  gap: 20px;
  justify-items: center;
}
.brand--page .brand__logo-card{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 250px;
  padding: 28px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(19, 36, 64, 0.08);
}
.brand--page .brand__logo{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 194px;
  margin: 0;
}
.brand--page .brand__aside .button-row__list{
  display: flex;
  justify-content: center;
}
.brand--page .brand__content{
  padding: 44px;
  background: var(--surface-2);
  border-radius: 14px;
}
.brand--page .brand__content .text > :last-child{ margin-bottom: 0; }

@media (max-width: 1199.98px){
  .brand--page{
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 24px;
  }
  .brand--page .brand__content{ padding: 32px; }
}
@media (max-width: 991.98px){
  .brand--page{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .brand--page .brand__aside{ position: static; }
  .brand--page .brand__logo-card{ min-height: 180px; padding: 24px; }
  .brand--page .brand__logo{ max-height: 132px; }
}
@media (max-width: 575.98px){
  .brand--page .brand__logo-card{ min-height: 150px; padding: 20px; }
  .brand--page .brand__logo{ max-height: 110px; }
  .brand--page .brand__content{ padding: 20px; }
}

/* ===================== LANDING PAGE BRAND CONTENT ===================== */
.landing-page-shell{
  background: #fff;
}
.brand-landing{
  --brand-landing-side: 26.5%; /* 310 / 1170 */
  --brand-landing-gap: 1.03%;  /* 12 / 1170 */
  display: grid;
  grid-template-columns:
    var(--brand-landing-side)
    minmax(0, calc(100% - (var(--brand-landing-side) * 2) - (var(--brand-landing-gap) * 2)))
    var(--brand-landing-side);
  column-gap: var(--brand-landing-gap);
  align-items: stretch;
}
.brand-landing__logo-card,
.brand-landing__actions{
  min-height: 250px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(19, 36, 64, 0.08);
}
.brand-landing__logo-card{
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 32px; */
  box-shadow: none;
  background: #fff;
    box-shadow: 0 10px 28px rgba(19, 36, 64, 0.08);
}
.brand-landing__logo{
  display: block;
  max-width: 100%;
  max-height: 250px;
  width: auto;
  height: auto;
  margin: 0;
}
.brand-landing__actions{
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  padding: 42px;
}
.brand-landing__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 50px;
  padding: 8px 24px;
  box-sizing: border-box;
  border-radius: 0;
  color: #09347b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: none;
  filter: drop-shadow(0 8px 10px rgba(42, 53, 66, .12));
  transition: transform 200ms ease, filter 200ms ease;
}
.brand-landing__button:hover,
.brand-landing__button:focus-visible{
  transform: translateY(-2px);
  filter: drop-shadow(0 12px 14px rgba(42, 53, 66, .18)) brightness(1.03);
}
.brand-landing__button--light{
  width: 262px;
  background-image: url('../images-new/button_catalog.png');
   background-size: 100% 100%;
  background-position: center center;
  height: 60px;
}
.brand-landing__button--primary{
  position: relative;
  color: #fff;
  background-image: url('../images-new/button_show_more.png');
}
.brand-landing__button--primary::before{
  content: '';
  position: absolute;
  left: 50%;
  top: -26px;
  width: 250px;
  height: 1px;
  background: #f8f8f8;
  transform: translateX(-50%);
  pointer-events: none;
}
.brand-landing__content{
  display: contents;
}
.brand-landing__content > *{
  grid-column: 1 / -1;
}
.brand-landing__content > :first-child{
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #f6f8fb;
}
.brand-landing__content > :first-child img{
  display: block;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 310px;
  object-fit: cover;
  margin: 0 !important;
}
.brand-landing__content > h2 {
  margin-top: 52px;
  color: #09347b;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.brand-landing__content > p:not(:first-child):not(:nth-child(2)),
.brand-landing__intro{
  /* max-width: 1170px; */
  text-align: start;
  color: #000000;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}
.brand-landing__range-title{
  max-width: 1170px;
  margin: 28px auto 0;
  color: #52657f;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}
.brand-landing__range-title strong{
  color: #09347b;
  font-weight: 800;
}
.brand-landing__range-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  margin: 28px auto 30px;
}
.brand-landing__range-card{
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #f7f8fb;
  box-shadow: 0 8px 22px rgba(19, 36, 64, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.brand-landing__range-card:hover,
.brand-landing__range-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce){
  .brand-landing__range-card{ transition: none; }
}
.brand-landing__range-card img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
@media (max-width: 1199.98px){
  .brand-landing{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-landing__logo-card{
    grid-column: 1;
    grid-row: 2;
  }
  .brand-landing__actions{
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    flex-direction: row;
    gap: 24px;
    padding: 24px;
  }
  .brand-landing__content > :first-child{
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .brand-landing__range-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }
}
@media (max-width: 767.98px){
  .brand-landing{
    display: flex;
    flex-direction: column;
  }
  .brand-landing__logo-card{
    order: 1;
    min-height: 0;
    background: transparent;
    margin-bottom: 18px;
    background: transparent;
    box-shadow: none;
  }
  .brand-landing__content{
    display: contents;
  }
  .brand-landing__content > :first-child{
    order: 2;
    min-height: 0;
    margin-bottom: 28px;
  }
  .brand-landing__content > :first-child img{
    min-height: 0;
  }
  .brand-landing__actions{
    order: 3;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background: transparent;
    box-shadow: none;
    margin-bottom: 28px;
    /* padding: 24px 0; */
  }
  .brand-landing__content > :nth-child(2){
    order: 4;
    margin-top: 0;
  }
  .brand-landing__content > p:not(:first-child):not(:nth-child(2)){
    order: 5;
  }
  .brand-landing__content > h2:not(:nth-child(2)),
  .brand-landing__range-title{
    order: 6;
  }
  .brand-landing__range-grid{
    order: 7;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 48px;
  }
}

/* ==========================================================================
   Продължи като (checkout step1) — Figma 2258:277
   ========================================================================== */
.continue-as .options__fields{
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.continue-as .options__header{
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
/* 126px = 36px до кръга + 90px, с колкото кръгът излиза над панела */
.continue-as .continue-as__title{
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  text-align: center;
  text-transform: none;
  margin: 0 0 126px;
}

.continue-as__panel{
  position: relative;
  max-width: 1162px;
  width: 100%;
  margin-inline: auto;
  padding: 163px 0 85px;
  background: #f6f8fa;
  border-radius: 20px;
}

.continue-as__badge{
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 221px;
  height: 221px;
  border-radius: 50%;
  background: #f6f8fa;
}
.continue-as__badge-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #e4ebf2;
}
.continue-as__badge img{
  display: block;
  width: 179px;
  height: 179px;
}

.continue-as__grid{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 102px;
}
.continue-as__item{
  position: relative;
  width: 230px;
}
.continue-as__item + .continue-as__item::before{
  content: "";
  position: absolute;
  top: 0;
  left: -51px;
  width: 1px;
  height: 160px;
  background: #d9d9d9;
}

.continue-as__option{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin: 0;
}
.continue-as__option input[type="radio"]{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.continue-as__icon{
  display: block;
  margin-bottom: 23px;
}
.continue-as__icon img{
  display: block;
  width: 105px;
  height: 105px;
}

/* Фонът е готовата графика b_profil.png (230x50). border-radius остава,
   за да следва box-shadow-ът силуета, а не прозрачните ъгли на картинката. */
.continue-as__pill{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 50px;
  padding: 0 12px;
  border-radius: 25px;
  background: url('../images-new/b_profil.png') center / 230px 50px no-repeat;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #09347b;
  text-align: center;
  text-transform: uppercase;
}
.continue-as__option:hover .continue-as__pill{
  box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.28);
}
.continue-as__option input[type="radio"]:checked ~ .continue-as__pill{
  background: #09347b;
  color: #fff;
}
.continue-as__option input[type="radio"]:focus-visible ~ .continue-as__pill{
  outline: 2px solid #09347b;
  outline-offset: 2px;
}

/* Размерът на бутона "Продължи" по Figma; фонът идва от .checkout-page .button */
.continue-as .button-row .button{
  width: 207px;
  height: 51px;
  padding: 0;
}

/* Блокът "Свържете се с нас" на checkout страниците (_checkout_contact.htm),
   между съдържанието и футъра. */
.checkout-contact{
  margin: 24px 0 34px;
  text-align: center;
  color: #000;
}
.checkout-contact__text{
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 38px;
  margin: 0;
}
.checkout-contact__phone{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 38px;
  color: #000;
  text-decoration: none;
}
.checkout-contact__phone:hover{ color: #09347b; }

@media (max-width: 991px){
  .continue-as .continue-as__title{
    font-size: 24px;
    margin-bottom: 98px; /* 28px до кръга + 70px overlap */
  }
  .continue-as__panel{
    padding: 120px 20px 40px;
  }
  .continue-as__badge{
    top: -70px;
    width: 160px;
    height: 160px;
  }
  .continue-as__badge-inner{
    width: 130px;
    height: 130px;
  }
  .continue-as__badge img{
    width: 129px;
    height: 129px;
  }
  .continue-as__grid{
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .continue-as__item + .continue-as__item::before{
    top: -16px;
    left: 0;
    width: 230px;
    height: 1px;
  }
  .checkout-contact__phone{ font-size: 20px; }
}

/* ==========================================================================
   Checkout (checkout_layout.htm → main.checkout-page)
   ========================================================================== */

/* JS-ът превключва блокове с classList.add/remove("hidden") (SelectType в main.js).
   Глобален .hidden няма — той е скоупнат по страници (.profile-page, .auth-page).
   Без това правило всички условни полета — юридическо лице и всичките пет
   адресни форми — се показват едновременно. */
.checkout-page .hidden{ display: none; }
/* jsSelectsBackend.render() (_footer_new_js.htm:29-33) слага `hidden` на всеки
   елемент с data-select-block-group — включително самите radio input-и, които
   носят този атрибут. Те трябва да останат видими. Същият guard има и
   .profile-page (styles.css:11497). */
.checkout-page .form__check-input.hidden{ display: inline-block; }

/* --- Стъпков индикатор (_checkout_steps.htm) ---
   Портнат от main.css. Единствена разлика: активното състояние ползва
   брандовото синьо (--primary) и #e4ebf2 вместо старите #ff003b / #ffecf0. */
.steps{
  margin-bottom: 26px;
  text-align: center;
}
.steps .title{ margin-bottom: 40px; }
.steps__cont{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps__cont--numbers{ justify-content: space-between; }
.steps__cont--numbers .steps__item{ flex: 0 1 76px; }
.steps__item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.steps__item::before{
  content: "";
  position: absolute;
  top: 38px;
  right: 50%;
  width: calc(100% + 25px);
  border-bottom: 2px dashed #e7ebee;
}
.steps__item:first-child::before{ display: none; }
.steps__cont--text .steps__item{
  flex: 1;
  display: none;
}
.steps__cont--text .steps__item::before{ display: none; }
.steps__cont--text .steps__item.is-active{ display: block; }

.steps__number{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 14px;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  color: #232323;
}
.steps__number span{
  position: relative;
  z-index: 2;
}
.steps__number::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border: 1px solid #e7ebee;
  border-radius: 50%;
  background-color: #f7f9f9;
}
.steps__label{
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.6px;
  text-align: center;
  color: #232323;
}
.steps__item.is-active .steps__number{
  border: 2px solid var(--primary);
  background-color: #e4ebf2;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -.86px;
  color: var(--primary);
}
.steps__item.is-active .steps__number::after{
  width: 62px;
  height: 62px;
  border: 2px solid var(--primary);
  background-color: #e4ebf2;
}
.steps__item.is-active .steps__label{ color: var(--primary); }

@media (max-width: 479.98px){
  .steps__item::before{ width: 24vw; }
}
@media (min-width: 480px){
  .steps__cont--numbers .steps__item{ flex: 1; }
}
@media (min-width: 1024px){
  .steps{ margin-bottom: 66px; }
  .steps__cont--numbers{ justify-content: center; }
  .steps__cont--numbers .steps__item{ flex: 0 1 300px; }
  .steps__item::before{ top: 34px; }
  .steps__cont--text .steps__item{
    flex: 0 1 300px;
    display: block;
  }
  .steps__number{
    width: 72px;
    height: 72px;
    margin-bottom: 4px;
    font-size: 18px;
  }
  .steps__number::after{ width: 51px; height: 51px; }
  .steps__label{
    margin-bottom: 0;
    font-size: 15px;
    line-height: 2;
    color: #000;
  }
  .steps__item.is-active .steps__number::after{ width: 58px; height: 58px; }
}

/* --- Бутони ---
   Основният ползва същата графика като auth страницата. drop-shadow следва
   алфа силуета на PNG-то, за разлика от box-shadow, който чертае правоъгълник.
   :not(.button--sub) пази вторичния бутон "Назад" с белия му фон. */
.checkout-page .button:not(.button--sub):not(.button--outline){
  background: url('../images-new/finish_order.png') center / 100% 100% no-repeat;
  color: #fff;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
.checkout-page .button:not(.button--sub):not(.button--outline):hover{
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}
/* Вторичният бутон "Назад" — същата графика като "Към количката" в мини-кошницата
   (styles.css:1445). border:0 маха рамката на .button--sub.
   .button--outline ("Към плащане" на thankyou/cancel) няма правила никъде и иначе
   излиза идентичен на съседния primary бутон — третираме го като вторичен. */
.checkout-page .button--sub,
.checkout-page .button--outline{
  background: url('../images-new/to_cart_bg.png') center / 100% 100% no-repeat;
  border: 0;
  color: var(--primary);
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .22));
}
.checkout-page .button--sub:hover,
.checkout-page .button--outline:hover{
  filter: brightness(1.05) drop-shadow(0 8px 16px rgba(12, 55, 113, .28));
}
/* _same_order_modal.htm puts its two buttons in a .button-row__list with no
   .button-row parent, so none of the existing .button-row__list rules match. */
.checkout-page .modal .button-row__list{
  display: flex;
  justify-content: center;
  gap: 12px;
}

.checkout-page .button-row--sb .button-row__list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.checkout-page .button-row--bordered{
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* "Физическо лице / Юридическо лице" — същото подреждане като на auth
   страницата (styles.css:10973), която ползва идентичен markup. */
.checkout-page .form-header__btns{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.checkout-page .form-header__btns .form__check{
  align-items: center;
}

/* --- Бутонен ред (общ за step1 и step3) --- */
.checkout-page .button-row--center{
  margin-top: 48px;
  margin-bottom: 20px;
}
.checkout-page .button-row--center .button-row__list{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* --- Избор на начин на плащане (step3 + cart_click_and_collect/step3) ---
   Портнато от main.css; тези класове нямаха нито едно правило в styles.css.
   `:not(.continue-as)` пази step1, който ползва същите .options__* класове,
   но е стилизиран по Figma. Активният radio е с --primary вместо #ff003b. */
.checkout-page .options:not(.continue-as){
  text-align: center;
}
.checkout-page .options:not(.continue-as) .options__header{
  display: block;
  width: 100%;
}
.checkout-page .options:not(.continue-as) .options__header .title{
  margin-bottom: 30px;
}
.checkout-page .options:not(.continue-as) .options__grid{
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 50px;
  border-radius: 150px;
  background-color: #EDF1F6;
}
.checkout-page .options:not(.continue-as) .options__item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 16px 20px 24px;
}
/* Нативният radio се крие; кръгчето се рисува от ::before/::after на етикета */
.checkout-page .options:not(.continue-as) .options__item input{
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  appearance: none;
}
.checkout-page .options:not(.continue-as) .options__icon{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.checkout-page .options:not(.continue-as) .options__icon .icon{
  width: 72px;
  height: 72px;
}
.checkout-page .options:not(.continue-as) .options__label{
  position: relative;
  display: inline-block;
  min-height: 20px;
  padding: 2px 32px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.38;
  color: #000;
  text-align: center;
}
.checkout-page .options:not(.continue-as) .options__label::before,
.checkout-page .options:not(.continue-as) .options__label::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
}
.checkout-page .options:not(.continue-as) .options__label::before{
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid gray;
}
.checkout-page .options:not(.continue-as) .options__label::after{
  top: 7px;
  left: 7px;
  width: 8px;
  height: 8px;
  opacity: 0;
  transition: opacity .2s ease;
}
.checkout-page .options:not(.continue-as) .options__item input:checked ~ .options__label::before{
  border-color: var(--primary);
  background-color: var(--primary);
}
.checkout-page .options:not(.continue-as) .options__item input:checked ~ .options__label::after{
  opacity: 1;
}
.checkout-page .options:not(.continue-as) .options__item input:disabled ~ .options__icon{
  filter: grayscale(1);
  opacity: .3;
}
.checkout-page .options:not(.continue-as) .options__item input:disabled ~ .options__label{
  opacity: .3;
}
.checkout-page .options:not(.continue-as) .form__tooltip{
  position: absolute;
  top: 0;
  right: 0;
}
.checkout-page .options:not(.continue-as) .form__tooltip-trigger{
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: url('../images/form-tooltip.svg') no-repeat center / contain;
  color: currentColor;
  font-size: 0;
  cursor: pointer;
}
/* Not scoped to .options: the same payment-info box (bank_transfer_info.htm,
   via BankTransfer::getPaymentInfo()) is also rendered by thankyou.htm:45 and
   cc/thankyou.htm inside a bare <div class="options__details">, outside any
   .options wrapper. step1's .continue-as has no .options__details at all. */
.checkout-page .options__details{
  max-width: 1137px;
  margin: 20px auto 0;
  padding: 32px 20px 50px;
  border: 1px solid rgba(35, 35, 35, .15);
  border-radius: 109px;
  background-color: #fff;
  text-align: center;
}
.checkout-page .options__details-title{
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: -1.03px;
  color: #232323;
}
.checkout-page .options__details-text{
  margin: 0;
  padding: 0 15%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.57;
  letter-spacing: -.6px;
  color: #232323;
}

@media (min-width: 1024px){
  .checkout-page .options:not(.continue-as) .options__item{
    max-width: 360px;
    margin-bottom: 0;
    padding: 24px 26px 40px;
  }
  .checkout-page .options:not(.continue-as) .options__icon{ margin-bottom: 15px; }
  .checkout-page .options:not(.continue-as) .options__icon .icon{
    width: 90px;
    height: 90px;
  }
}
@media (max-width: 1200px){
  .checkout-page .options:not(.continue-as) .options__grid{
    align-items: center;
    padding: 50px 20px;
    border-radius: 40px;
  }
  .checkout-page .options:not(.continue-as) .options__item{ flex-basis: 50%; }
  .checkout-page .options__details{
    max-width: none;
    border-radius: 40px;
  }
}
@media (max-width: 768px){
  .checkout-page .options:not(.continue-as) .options__grid.short{
    flex-direction: column;
    width: 100%;
  }
  .checkout-page .options__details-text{ padding: 0 20px; }
}

.js-checkout-step2 .custom-row{ --gutter-x: 0px; }

/* ===================== CHECKOUT STEP 4 — ПРЕГЛЕД =====================
   Markup: modules/checkout/views/frontend/cart/step4.htm
   The legacy .preview / .grey-box-sm / .products* rules live only in the
   unloaded main.css. Values below mirror the finished profile order-detail
   block (.profile-page .grey-box-sm / .products*) so the two stay consistent. */
/* the shared .wrapper--m token is 1140px; the preview data area follows the
   profile order-detail width instead (.profile-page .registration .wrapper) */
.checkout-page .preview .wrapper--m{ --container: 1034px; }
.checkout-page .preview .title--xl{ margin: 0 0 40px; }
.checkout-page .preview .preview__info{ position: relative; margin-bottom: 40px; }
.checkout-page .preview .preview__info .title--s{
  margin: 0 0 16px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
}

/* --- Данни / Данни за доставка: zebra table, label left, value right --- */
.checkout-page .preview .grey-box-sm{ position: relative; }
.checkout-page .preview .grey-box-sm .table--mob{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.checkout-page .preview .grey-box-sm .table--mob tr{ height: 45px; }
.checkout-page .preview .grey-box-sm .table--mob tr:nth-child(odd) td{ background: #f6f8fa; }
.checkout-page .preview .grey-box-sm .table--mob tr:nth-child(odd) td:first-child{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.checkout-page .preview .grey-box-sm .table--mob tr:nth-child(odd) td:last-child{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.checkout-page .preview .grey-box-sm .table--mob td{
  padding: 8px 20px;
  color: #000;
  font-size: 15px;
  vertical-align: middle;
}
.checkout-page .preview td.preview__info-label{ text-align: left; white-space: nowrap; }
.checkout-page .preview td.preview__info-text{ text-align: right; }

/* --- Pencil links back to the step that owns the data --- */
.checkout-page .preview .edit-icon{
  position: absolute;
  top: -32px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309347b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 20h9'/%3e%3cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3e%3c/svg%3e") center / 18px no-repeat;
  opacity: .75;
  transition: opacity .2s ease;
}
.checkout-page .preview .edit-icon:hover{ opacity: 1; }

/* --- Product table --- */
.checkout-page .preview .bgr-grey{
  position: relative;
  padding: 0 40px;
  border: 1px solid #e4ebf2;
  border-radius: 10px;
  background: #fff;
}
.checkout-page .preview .products-header{
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;
  border-bottom: 1px solid #e4ebf2;
}
.checkout-page .preview .products-header-mob{ display: none; }
.checkout-page .preview .products-header-item{
  width: 128px;
  margin: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
}
.checkout-page .preview .products-list{ display: block; }
.checkout-page .preview .products-item{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e4ebf2;
}
.checkout-page .preview .products-item:last-child{ border-bottom: none; }
.checkout-page .preview .products-info{
  display: flex;
  flex: 1;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.checkout-page .preview .products-info__img{
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}
.checkout-page .preview .products-info__img img{ width: 100%; height: 100%; object-fit: contain; }
.checkout-page .preview .products-info__title{
  margin: 0;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
.checkout-page .preview .products-info__title a{ color: inherit; text-decoration: none; }
.checkout-page .preview .products-info__title a:hover{ text-decoration: underline; }
.checkout-page .preview .products-details{
  display: flex;
  flex: 0 0 384px;
  width: 384px;
  gap: 0;
  margin: 0;
}
.checkout-page .preview .products-details-item{
  flex: 1;
  margin: 0;
  color: #000;
  font-size: 12px;
  text-align: center;
}
.checkout-page .preview .basket-products__details-item-old-price{
  display: block;
  margin-bottom: 2px;
  color: #ff383c;
  text-decoration: line-through;
}
.checkout-page .preview .basket-products__details-item-new-price{ display: block; color: #000; }

/* promotion lines nested under their parent item */
.checkout-page .preview .products-item__promotion-preview-item{
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-top: 16px;
}

/* --- Totals --- */
.checkout-page .preview .products__prices{ padding: 20px 0; }
.checkout-page .preview .products__prices-table{
  margin-left: auto;
  border-collapse: collapse;
}
.checkout-page .preview .products__prices-item{
  padding: 0 0 0 24px;
  color: #000;
  font-size: 14px;
  line-height: 32px;
  text-align: right;
  white-space: nowrap;
}
.checkout-page .preview .products__prices-item:first-child{ padding-left: 0; text-align: left; }
/* Крайна цена — same danger red as the cart page total */
.checkout-page .preview .products__prices-item.text-red{ color: #f0212d; }
.checkout-page .preview .products__prices-item.bold{ font-weight: 700; }

/* --- Terms checkbox --- */
.checkout-page .preview .form__check{ margin-top: 32px; }

@media (max-width: 768px){
  .checkout-page .preview .bgr-grey{ padding: 0 16px; }
  .checkout-page .preview .products-header{ display: none; }
  .checkout-page .preview .products-item{ flex-direction: column; gap: 12px; }
  .checkout-page .preview .products-info{ flex: 1 0 100%; flex-direction: column; text-align: center; }
  .checkout-page .preview .products-info__title{ text-align: center; }
  .checkout-page .preview .products-header-mob{
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .checkout-page .preview .products-header-mob .products-header-item{ width: auto; flex: 1; }
  .checkout-page .preview .products-details{ flex: 1 0 100%; width: 100%; gap: 8px; }
  /* struck old prices are dropped on phones (markup marks them .mob-hidden) */
  .checkout-page .preview .mob-hidden{ display: none; }
  .checkout-page .preview .products__prices-table{ width: 100%; }
  .checkout-page .preview .products__prices-item{
    padding-left: 8px;
    font-size: 13px;
  }
  .checkout-page .preview .products__prices-item:first-child{ padding-left: 0; }
  .checkout-page .preview .edit-icon{ top: -28px; right: 0; }
}

/* Labels here are long ("Име Презиме и Фамилия", "Дата на раждане") and the
   values can be a full pharmacy address, so the two-column table overflows on
   phones. Stack label над value instead of shrinking the columns. */
@media (max-width: 575.98px){
  .checkout-page .preview .grey-box-sm .table--mob,
  .checkout-page .preview .grey-box-sm .table--mob tbody,
  .checkout-page .preview .grey-box-sm .table--mob tr,
  .checkout-page .preview .grey-box-sm .table--mob td{ display: block; width: 100%; }
  .checkout-page .preview .grey-box-sm .table--mob tr{ height: auto; margin-bottom: 4px; }
  .checkout-page .preview .grey-box-sm .table--mob td{ padding: 6px 14px; font-size: 14px; }
  .checkout-page .preview td.preview__info-label{
    white-space: normal;
    padding-bottom: 0;
    font-weight: 700;
  }
  .checkout-page .preview td.preview__info-text{ text-align: left; padding-top: 0; }
  .checkout-page .preview .grey-box-sm .table--mob tr:nth-child(odd) td:first-child{
    border-radius: 5px 5px 0 0;
  }
  .checkout-page .preview .grey-box-sm .table--mob tr:nth-child(odd) td:last-child{
    border-radius: 0 0 5px 5px;
  }
}

/* ===================== CHECKOUT — THANKYOU =====================
   Markup: modules/checkout/views/frontend/cart/thankyou.htm
   .img-bgr / .upper-index / .order-success__* and the pt-l/pb-xl/mb-m spacing
   utilities exist only in the unloaded main.css. Without them the two 588x353
   leaf SVGs sit in the flow and push the whole page down. */
.checkout-page .img-bgr{ position: relative; }
.checkout-page .img-bgr .icon{
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.checkout-page .img-bgr .img-left{ left: -350px; }
.checkout-page .img-bgr .img-right{ right: -150px; }
/* keeps the copy above the leaves */
.checkout-page .upper-index{ position: relative; z-index: 2; }

.checkout-page .pt-l{ padding-top: 40px; }
.checkout-page .pb-xl{ padding-bottom: 55px; }
.checkout-page .mb-m{ margin-bottom: 30px; }

.checkout-page .order-success__info{
  margin: 6px 0 45px;
  color: var(--text);
  font-size: 20px;
  line-height: 2.4;
}
.checkout-page .order-success__secondary-info{
  margin-bottom: 80px;
  padding: 0 20px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.47;
}
.checkout-page .icon-center{ display: block; margin: 0 auto; }

/* "Към началната страница" is wider than finish_order.png (207px), so the shared
   .checkout-page .button graphic stretched flat. Draw button_show_more.png
   (240x51) as a 9-slice instead: the 26px pill caps stay at native size and only
   the middle stretches, so the button can breathe without distorting.
   .upper-index exists on thankyou.htm, cancel.htm and payment_success.htm; the
   :not()s keep the secondary "Към плащане" button out of the primary graphic. */
.checkout-page .upper-index .button:not(.button--outline):not(.button--sub){
  width: auto;
  min-width: 240px;
  height: 51px;
  padding: 0 18px;
  /* fallback if border-image is unsupported; the fill slice paints over it */
  background: url('../images-new/button_show_more.png') center / 100% 100% no-repeat;
  border: 0 solid transparent;
  border-width: 0 26px;
  border-image: url('../images-new/button_show_more.png') 0 26 fill / 0 26px stretch;
}

@media (max-width: 768px){
  /* the leaves bleed far outside the 720px wrapper; main.css dropped them too */
  .checkout-page .img-bgr{ display: none; }
  .checkout-page .order-success__info{ line-height: 1.6; margin-bottom: 32px; }
  .checkout-page .order-success__secondary-info{ margin-bottom: 48px; }
}

/* ==========================================================================
   PRODUCT PAGE — MOBILE (<=768px), per Figma "Subra mobile" 238:62
   The mobile design is not the desktop grid stacked: the title comes before the
   availability row, the gallery sits between them and the price, and the heart
   lives on the availability row. Nothing below applies above 768px.
   ========================================================================== */

/* second heart instance, mobile only (see .product__info-availability below) */
.product-block_backend .product__info-availability-fav{ display: none; }

/* the gallery arrows reuse .related-products__nav, which is desktop-only there */
.product-block_backend .product__gallery-nav{ display: none; }

@media (max-width: 768px){
  /* The gutter on this site is not padding — .wrapper is
     width: min(--container, calc(100% - 32px)), i.e. a 16px margin each side.
     Padding here would stack on top of that, so the sections below line up on
     those 16px instead. */
  .product-block_backend .wrapper--middle{
    padding-bottom: 0;
  }

  /* Two columns exist only so Click&collect / Share can share a row later;
     everything else spans both. Order is what puts the gallery mid-column. */
  .product-block_backend .product{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;
    row-gap: 0;
    /* Figma: 35px between the banner and the labels; .section already gives 15px */
    margin: 20px 0 6px;
  }
  .product-block_backend .product__info{ display: contents; }

  .product-block_backend .product > *,
  .product-block_backend .product__info > *{
    order: 30;
    grid-column: 1 / -1;
    max-width: none;
  }
  .product-block_backend .product-card__labels{ order: 1; }
  .product-block_backend .product__info-title{ order: 2; }
  .product-block_backend .product__info-availability{ order: 3; }
  .product-block_backend .product__gallery{ order: 4; }
  .product-block_backend .product__purchase{ order: 5; }
  .product-block_backend .product__info-price-text{ order: 6; }
  .product-block_backend .product__info-second{ order: 7; }
  .product-block_backend .product__info-second-title-box{ order: 8; }
  .product-block_backend .product__info-share{ order: 9; }

  /* the heart moved to the availability row */
  .product-block_backend .product__info-favorite{ display: none; }

  /* Labels */
  .product-block_backend .product-card__labels{
    justify-content: center;
    gap: 4px;
    margin: 0 0 19px;
  }
  .product-block_backend .product-card__label{
    min-height: 20px;
    padding: 3px 9px;
    border-radius: 25px;
    font-size: 12px;
    line-height: 1.2;
  }

  /* Title */
  .product-block_backend .product__info-title{
    max-width: 363px;
    margin: 0 auto 6px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
  }

  /* Availability + heart */
  .product-block_backend .product__info-availability{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    margin: 0 0 3px;
    padding: 0 35px 0 24px;
  }
  .product-block_backend .product__info-availability-item{ gap: 7px; }
  .product-block_backend .product__info-availability-item-check{ font-size: 12px; }
  .product-block_backend .product__info-availability-fav{ display: block; }

  /* Bare heart — no icons_bg.png disc, unlike the "Запази в любими" row.
     The PNG inside the button is white-on-blue, so mask a heart instead. */
  .product-block_backend .product__info-availability-fav .favorite-button{
    flex: 0 0 auto;
    width: 23px;
    height: 21px;
    padding: 0;
    background: none;
    filter: none;
    color: #d9dde2;
  }
  .product-block_backend .product__info-availability-fav .favorite-button.is-active{ color: #ff0000; }
  .product-block_backend .product__info-availability-fav .user-nav__link-icon{ display: none; }
  .product-block_backend .product__info-availability-fav .favorite-button::before{
    content: "";
    display: block;
    width: 23px;
    height: 21px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 21'%3E%3Cpath d='M11.5 20.6 2.6 11.9C.4 9.7.4 6.2 2.6 4.1a5.1 5.1 0 0 1 7.2 0l1.7 1.7 1.7-1.7a5.1 5.1 0 0 1 7.2 0c2.2 2.1 2.2 5.6 0 7.8l-8.9 8.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 21'%3E%3Cpath d='M11.5 20.6 2.6 11.9C.4 9.7.4 6.2 2.6 4.1a5.1 5.1 0 0 1 7.2 0l1.7 1.7 1.7-1.7a5.1 5.1 0 0 1 7.2 0c2.2 2.1 2.2 5.6 0 7.8l-8.9 8.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Gallery — arrows instead of bullets */
  .product-block_backend .product__gallery{ position: relative; }
  .product-block_backend .product__gallery .block-link{ width: 289px; }
  .product-block_backend .product__gallery .swiper-pagination{ display: none; }

  .product-block_backend .product__gallery-nav{
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
  }
  .product-block_backend .product__gallery-nav.swiper-button-lock{ display: none; }
  /* the buttons reuse the slider component, so the side is on its modifier —
     there is no .product__gallery-nav--prev/--next class */
  .product-block_backend .product__gallery-nav.related-products__nav--prev{ left: 20px; }
  .product-block_backend .product__gallery-nav.related-products__nav--next{ right: 20px; }
  .product-block_backend .product__gallery-nav .related-products__nav-icon{
    width: 25px;
    height: 25px;
  }

  .product-block_backend .product__purchase:not(.product__purchase--notify){
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .product-block_backend .product__purchase.product__purchase--notify{
    border-radius: 20px;
  }

  /* old price sits above the new one — it has no place in the card */
  .product-block_backend .product__info-price-text{ order: 4; }
  .product-block_backend > .wrapper > .product > .product__info > .product__info-price-text{
    margin: 0;
    padding: 0;
    font-size: 13px;
    text-align: center;
  }

  .product-block_backend .product__purchase:not(.product__purchase--notify) .product__info-price{
    flex: 0 0 auto;
    margin: 8px 0 19px;
    padding: 0;
  }
  .product-block_backend .product__purchase:not(.product__purchase--notify) .product__info-price-new{
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    font-size: 26px;
    line-height: 28px;
  }
  .product-block_backend .product__purchase:not(.product__purchase--notify) .product__prices-sep{
    display: inline;
  }

  /* card — top half */
  .product-block_backend .product__purchase:not(.product__purchase--notify) .product__info-btns{
    padding: 4px 4px 0;
    border-radius: 20px 20px 0 0;
    background: #f8f8f8;
  }
  .product-block_backend .product__purchase:not(.product__purchase--notify) .product__info-btns-add-basket{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    height: 82px;
    padding: 0 13px 0 18px;
    border-radius: 20px;
    background: #e4ebf2;
  }
  .product-block_backend .product__purchase .product__info-btns-counter{
    align-self: center;
    padding: 0;
  }
  .product-block_backend .product__purchase .counter-input{ gap: 9px; }
  .product-block_backend .product__purchase .button.product__info-btns-add{
    width: 100%;
    max-width: 240px;
    min-height: 50px;
    font-size: 12px;
    font-weight: 700;
  }

  /* card — bottom half */
  .product-block_backend .product__info-second{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 6px;
    padding: 8px 6px 11px;
    border-radius: 20px;
    background: #f8f8f8;
  }
  .product-block_backend .product__info-second--attached{ border-radius: 0 0 20px 20px; }
  .product-block_backend .product__info-second-item{
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }
  .product-block_backend .product__info-second-item:not(:last-child)::after{ display: none; }
  .product-block_backend .product__info-second-title,
  .product-block_backend .product__info-second-text{
    font-size: 11px;
    line-height: 18px;
  }

  /* --- Click & collect + Share — two cards on one row (Figma 239:96) --- */
  .product-block_backend .product__info-second-title-box,
  .product-block_backend .product__info-share{
    grid-column: span 1;
    min-height: 78px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #edf1f6;
  }
  .product-block_backend .product__info-second-title-box > a.button.product__info-btns-add.product__info-btns--reserved,
  .product-block_backend .product__info-share-link{
    gap: 9px;
    min-height: 78px;
    padding: 0 8px 0 13px;
    font-size: 11px;
    line-height: 16px;
  }
  .product-block_backend .product__info-second-title-box .user-nav__link-icon,
  .product-block_backend .product__info-share-icon{
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 8px;
  }

  /* the popup is anchored to a half-width card now — keep it on screen */
  .product-block_backend .product__info-share-modal{
    right: 0;
    left: auto;
    top: auto;
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: min(90vw, 320px);
    padding: 24px 28px 8px;
  }
  .product-block_backend .product__info-share-modal:after{ display: none; }

  /* --- Tabs become an accordion (Figma 241:140) ---
     Tabby stays in charge: display:contents makes the nav items and the panels
     siblings inside .tabs, and `order` interleaves each panel under its own row.
     .tabs is clipped, so whichever row or panel ends up last gets the rounded
     bottom without having to know which tab is open. */
  /* .gray-box is full-bleed (.gray-box-full-width has no rule in the loaded
     CSS), so its whole gutter comes from padding — match the wrapper's 16px. */
  .product-block_backend .gray-box{
    padding-inline: 16px;
    background: transparent;
  }
  .product-block_backend .tabs{
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
  }
  .product-block_backend .tabs__nav,
  .product-block_backend .tabs__body-cont{ display: contents; }

  .product-block_backend .tabs__nav-item:nth-child(1){ order: 1; background: #edf1f6; }
  .product-block_backend .tabs__body-cont > div:nth-child(1){ order: 2; }
  .product-block_backend .tabs__nav-item:nth-child(2){ order: 3; background: #e4ebf2; }
  .product-block_backend .tabs__body-cont > div:nth-child(2){ order: 4; }
  .product-block_backend .tabs__nav-item:nth-child(3){ order: 5; background: #d1dde8; }
  .product-block_backend .tabs__body-cont > div:nth-child(3){ order: 6; }

  /* the desktop nav centres itself with auto side margins; in a column those
     shrink the row to its text instead */
  .product-block_backend .tabs__nav-item,
  .product-block_backend .tabs__nav-item:first-child,
  .product-block_backend .tabs__nav-item:last-child{
    width: 100%;
    margin: 0;
  }

  .product-block_backend .tabs__nav-link,
  .product-block_backend .tabs__nav-link[aria-selected="true"]{
    position: relative;
    justify-content: flex-start;
    min-height: 55px;
    padding: 8px 16px 8px 53px;
    border-radius: 0;
    background: transparent;
    color: #09347b;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-transform: none;
    white-space: normal;
  }
  .product-block_backend .tabs__nav-link::before{
    content: "";
    position: absolute;
    left: 34px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 150ms ease;
  }
  .product-block_backend .tabs__nav-link[aria-selected="true"]::before{
    transform: rotate(45deg);
  }

  /* Tabby hides panels with the hidden attribute. Keep them displayed so the
     open/close can be animated; custom-scripts.js drives the pixel heights. */
  .product-block_backend .tabs__body{
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 18px;
    overflow: hidden;
    background: #f8f8f8;
    font-size: 13px;
    transition: height 1000ms ease, padding 1000ms ease;
  }
  .product-block_backend .tabs__body[hidden]{
    display: block;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* 35px so the arrow divider below (pulled up by half its 70px circle) overlaps
     this padding instead of the button — see the divider rule further down */
  .product-block_backend .product-comments-wrapper{
    padding-bottom: 35px;
    background: transparent;
  }
  .product-block_backend #product_comments{
    padding: 33px 0 0;
  }
  /* :not(.el-hide) so the hook can still hide the button once the form is open */
  .product-block_backend #product_comments .product-comments__toggle:not(.el-hide){ display: block; }
  .product-block_backend #product_comments .product-comments__form-wrap.el-hide{ display: none; }
  .product-block_backend #product_comments .pt-m.center{ padding-top: 0; }

  /* 9-slice the pill graphic, as on the checkout buttons (13482): the 26px caps
     keep their shape and only the middle stretches, so a longer label still fits */
  .product-block_backend #product_comments .pt-m.center > .button{
    width: auto;
    min-width: 260px;
    height: 44px;
    padding: 0 18px;
    background: url('../images-new/button_show_more.png') center / 100% 100% no-repeat;
    border: 0 solid transparent;
    /* border-width: 0 26px; */
    border-image: url('../images-new/button_show_more.png') 0 26 fill / 0 26px stretch;
    box-shadow: none;
    font-size: 12px;
  }

  /* --- Sliders at the bottom of the product page ---
     The themed divider is pulled up -80px to swallow the bottom padding of the
     slider it normally follows (9327). Here it follows the comments block, so it
     landed on the "Добави коментар" button. The mobile -35px it was meant to use
     is commented out at 9430; apply it via .related-products--product, which
     custom_class puts on the divider AND the section and which has no other CSS. */
  .section-arrow-divider--themed.related-products--product{
    margin-top: -35px;
  }
  .product-block_backend:has(.customer-info-band) + .section-arrow-divider--themed{
    margin-top: 0;
  }

  /* Tighten the bullets. Scoped with the :has() pattern already used at 1800 so
     the same slider on the homepage / cart / news keeps its spacing. */
  /* 1800 zeroes the bottom padding on this page, which leaves the bullets stuck
     to whatever follows (the banner). Give them room — and only when a slider is
     actually rendered, since the rule hangs off the section itself. */
  .main-content:has(.product-block_backend) .related-products{
    padding-top: 24px;
    padding-bottom: 20px;
  }
  .main-content:has(.product-block_backend) .related-products .title{
    margin-bottom: 20px;
  }
  .main-content:has(.product-block_backend) .related-products__viewport{
    padding-bottom: 8px;
  }
  .main-content:has(.product-block_backend) .related-products__pagination{
    margin-top: 10px;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce){
  .product-block_backend .tabs__body{ transition: none; }
}

@media (prefers-reduced-motion: reduce){
  .product-block_backend .tabs__body .text{ transition: none; }
}

/* --- Delivery band — 4 cards (Figma 241:127) ---
   Same markup as the homepage band (.customer-info--alt), but the homepage mobile
   grid at 8662-8709 excludes the product page. Rebuilt here with the product
   design's numbers rather than widening that guard, so the homepage stays
   untouched. Runs to 991px, since 8591 otherwise stacks the four cards into a
   column on tablet. */
@media (max-width: 991px){
  .product-block_backend .customer-info-band,
  .product-block_backend .customer-info-band .customer-info--alt{
    background: transparent;
  }
  .product-block_backend .customer-info-band .customer-info,
  .product-block_backend .customer-info-band .customer-info--alt{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    /* the band already sits in a .wrapper--xxl, so its own padding doubled the gutter */
    margin: 8px 0 0;
    padding: 0;
    border-radius: 0;
    min-height: 0;
  }
  .product-block_backend .customer-info-band .customer-info__item{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    width: auto;
    height: 100%;
    min-height: 112px;
    padding: 10px 4px;
    background: #f8f8f8;
    border-radius: 20px;
  }
  .product-block_backend .customer-info-band .customer-info__item + .customer-info__item::before{
    display: none;
  }
  .product-block_backend .customer-info-band .customer-info__icon{
    width: 42px;
    height: 42px;
    padding: 6px;
  }
  .product-block_backend .customer-info-band .customer-info__text{
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .product-block_backend .customer-info-band .customer-info__text-mob{
    font-weight: 400;
    font-size: 12px;
  }
}

/* Tablet: .tabs__body is max-width 820px with no side padding, so between 769px
   and ~852px it is wider than the viewport and the text runs off the screen. */
@media (min-width: 769px) and (max-width: 991px){
  .product-block_backend .tabs__body{
    padding-inline: 16px;
  }

  /* Breathing room around the band, matching the 34px .section rhythm used at
     this width. Mobile keeps the 8px from the design; desktop is untouched. */
  .product-block_backend .customer-info-band .customer-info,
  .product-block_backend .customer-info-band .customer-info--alt{
    margin-block: 34px !important;
  }
}

/* ========================================================================== 
   NEWSLETTER — footer invitation and subscribe modal
   Scoped modifiers keep the poll popup, shared modal base and footer untouched.
   ========================================================================== */

.footer-card--newsletter{
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-height: 232px;
  margin: 0 auto;
  padding: 48px 360px 48px 56px;
  overflow: hidden;
  border: 1px solid rgba(9, 52, 123, .08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, .85) 0 3px, transparent 4px),
    linear-gradient(115deg, #fff 0%, #f7f9fd 58%, #dce8f4 100%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  text-align: left;
}
.footer-card--newsletter::before{
  content: "";
  position: absolute;
  top: -120px;
  right: -72px;
  z-index: -1;
  width: 430px;
  height: 430px;
  border: 74px solid rgba(1, 83, 148, .07);
  border-radius: 50%;
}
.footer-card--newsletter::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 42px;
  z-index: -1;
  width: 280px;
  height: 210px;
  background: url('../images/subscribe1.png') center / contain no-repeat;
  transform: translateY(-50%) rotate(-7deg);
  pointer-events: none;
}
.footer-card--newsletter .footer-card-imgs{
  display: none;
}
.footer-card--newsletter .title{
  max-width: 690px;
  margin: 0 0 12px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 500;
  line-height: 1.18;
}
.footer-card--newsletter .footer-card__text{
  margin: 0 0 28px;
  color: var(--muted);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-body);
}
.footer-card--newsletter .button{
  min-width: 160px;
}

.modal--newsletter{
  background-color: rgba(9, 24, 48, .42);
  backdrop-filter: blur(3px);
}
.modal--newsletter .modal__box{
  width: calc(100% - 32px);
  max-width: 820px;
  padding: 32px 0;
}
.modal--newsletter .modal__cont{
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 52, 123, .09);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(9, 24, 48, .24);
}
.modal--newsletter .modal__cont-inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 42%) minmax(0, 58%);
  min-height: 440px;
  color: var(--text);
  text-align: left;
}
.modal--newsletter .modal__cont-inner::before{
  content: "";
  grid-column: 1;
  grid-row: 1;
  background:
    radial-gradient(circle at 25% 22%, rgba(255, 255, 255, .9) 0 4px, transparent 5px),
    linear-gradient(145deg, #f3f6fb 0%, #d8e6f3 100%);
}
.modal--newsletter .modal__cont-inner::after{
  content: "";
  position: absolute;
  left: -90px;
  bottom: -145px;
  width: 360px;
  height: 360px;
  border: 62px solid rgba(1, 83, 148, .08);
  border-radius: 50%;
  pointer-events: none;
}
.modal--newsletter .modal__hero{
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: min(84%, 310px);
  max-width: none;
  height: auto;
  margin: 0;
  transform: rotate(-7deg);
  filter: drop-shadow(0 18px 24px rgba(9, 52, 123, .16));
  pointer-events: none;
}
.modal--newsletter .js-subscribe-form,
.modal--newsletter .js-subscribe-success{
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 68px 48px 56px;
}
.modal--newsletter .hidden{
  display: none;
}
.modal--newsletter .modal__title{
  margin: 0 0 14px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.2;
}
.modal--newsletter .modal__title--md{
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 1.5;
}
.modal--newsletter .modal__text{
  margin: 0 0 28px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: 400;
  line-height: var(--lh-body);
}
.modal--newsletter fieldset{
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.modal--newsletter .custom-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
}
.modal--newsletter .custom-row > *{
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.modal--newsletter .form__control{
  height: 50px;
  border-color: #d1dde8;
  border-radius: var(--radius-sm);
  background: #edf1f6;
  color: var(--text);
  font-size: var(--fs-15);
}
.modal--newsletter .form__control:hover{
  border-color: #b8c9dd;
  background: #e4ebf2;
}
.modal--newsletter .form__control:focus{
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(9, 52, 123, .12);
}
.modal--newsletter .button--send{
  width: 148px;
  height: 50px;
  padding: 0 20px;
  font-size: var(--fs-12);
  white-space: nowrap;
}
.modal--newsletter .modal__close{
  top: 18px;
  right: 18px;
  z-index: 3;
}

@media (max-width: 767.98px){
  .footer-card--newsletter{
    min-height: 0;
    padding: 40px 240px 40px 36px;
  }
  .footer-card--newsletter::after{
    right: 14px;
    width: 210px;
    height: 170px;
    opacity: .82;
  }

  .modal--newsletter .modal__cont-inner{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .modal--newsletter .modal__cont-inner::before{
    grid-column: 1;
    grid-row: 1;
    min-height: 170px;
  }
  .modal--newsletter .modal__cont-inner::after{
    top: -170px;
    left: -135px;
    bottom: auto;
  }
  .modal--newsletter .modal__hero{
    grid-column: 1;
    grid-row: 1;
    width: min(48%, 190px);
  }
  .modal--newsletter .js-subscribe-form,
  .modal--newsletter .js-subscribe-success{
    grid-column: 1;
    grid-row: 2;
    padding: 36px 32px 40px;
    text-align: center;
  }
  .modal--newsletter .modal__close{
    top: 14px;
    right: 14px;
  }
}

@media (max-width: 575.98px){
  .footer-card--newsletter{
    width: 100%;
    padding: 34px 24px 178px;
    text-align: center;
  }
  .footer-card--newsletter::before{
    top: auto;
    right: -118px;
    bottom: -190px;
  }
  .footer-card--newsletter::after{
    top: auto;
    right: 50%;
    bottom: 4px;
    width: 190px;
    height: 150px;
    transform: translateX(50%) rotate(-7deg);
  }
  .footer-card--newsletter .title{
    font-size: 26px;
  }
  .footer-card--newsletter .footer-card__text{
    margin-bottom: 22px;
    font-size: var(--fs-14);
  }
  .footer-card--newsletter .button{
    width: 100%;
  }

  .modal--newsletter .modal__box{
    width: calc(100% - 24px);
    padding: 12px 0;
  }
  .modal--newsletter .modal__cont-inner::before{
    min-height: 142px;
  }
  .modal--newsletter .modal__hero{
    width: min(44%, 155px);
  }
  .modal--newsletter .js-subscribe-form,
  .modal--newsletter .js-subscribe-success{
    padding: 30px 20px 28px;
  }
  .modal--newsletter .modal__title{
    margin-bottom: 10px;
    font-size: 24px;
  }
  .modal--newsletter .modal__title--md{
    font-size: var(--fs-16);
  }
  .modal--newsletter .modal__text{
    margin-bottom: 22px;
    font-size: var(--fs-14);
  }
  .modal--newsletter .custom-row{
    grid-template-columns: 1fr;
  }
  /* .modal--newsletter .button--send{
    width: 100%;
  } */
}

@media (prefers-reduced-motion: reduce){
  .modal--newsletter,
  .modal--newsletter .modal__cont{
    transition: none;
  }
}

/* =====================================================================
   FAVOURITES (/my/favourites)
   ===================================================================== */
.favourites-page{
  padding-top: 18px;
  padding-bottom: 72px;
}
.favourites-page .white-box--alt{
  min-height: 360px;
  padding: 32px;
  /* border: 1px solid rgba(9, 52, 123, .08); */
  /* border-radius: var(--radius); */
  background: var(--surface);
}
.favourites-page .favorites-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 282px));
  justify-content: center;
  align-items: stretch;
  gap: 36px;
}
.favourites-page .favorites-list__item{
  min-width: 0;
}
.favourites-page .favorites-list__item > .empty,
.favourites-page .favorites-list__item .product-card{
  height: 100%;
}
.favourites-page .product-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 451px;
  padding: 30px 18px 80px;
  border: 1px solid #e9e1d5;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 18px 24px rgba(38, 46, 57, .13);
  text-align: center;
  transition: box-shadow .25s ease, transform .25s ease;
}
.favourites-page .product-card:hover{
  box-shadow: 0 8px 16px rgba(38, 46, 57, .08);
  transform: translateY(-2px);
}
.favourites-page .product-card__labels{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 66px);
}
.favourites-page .product-card__label{
  display: inline-flex;
  align-items: center;
  min-height: 0;
  height: 22px;
  padding: 3px 13px;
  border-radius: 999px;
  background: #7fbd81;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.favourites-page .product-card__label--new{ background: #91bd88; }
.favourites-page .product-card__label--discount,
.favourites-page .product-card__label--promo,
.favourites-page .product-card__label--special-price{ background: #f0212d; }
.favourites-page .product-card__label--discount1{ background: #df5d67; }
.favourites-page .product-card__label--best-selling,
.favourites-page .product-card__label--best-seller,
.favourites-page .product-card__label--hit{ background: #f6b86f; }
.favourites-page .product-card__label--gift{ background: #5072a1; }
.favourites-page .product-card__button{
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.favourites-page .product-card > .product-card__button--favorites{
  display: none;
}
.favourites-page .remove-card{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(240, 33, 45, .2);
  border-radius: 50%;
  background: #fff;
  color: #f0212d;
  font-size: 0;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.favourites-page .remove-card:hover,
.favourites-page .remove-card:focus-visible{
  background: #f0212d;
  color: #fff;
  transform: scale(1.06);
}
.favourites-page .remove-card:focus-visible{
  outline: 2px solid rgba(9, 52, 123, .35);
  outline-offset: 2px;
}
.favourites-page .remove-card__icon{
  width: 18px;
  height: 18px;
  margin: 0;
  fill: currentColor;
}
.favourites-page .product-card__preview{
  order: 1;
  width: 100%;
  max-width: 170px;
  margin: 56px auto 12px;
  background: transparent;
}
.favourites-page .product-card__preview a,
.favourites-page .product-card__preview img{
  display: block;
  width: 100%;
  height: 100%;
}
.favourites-page .label-recommended-by-d{
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 8px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: #232323;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
}
.favourites-page .label-recommended-by-d picture{
  flex: 0 0 20px;
  max-width: 20px;
}
.favourites-page .label-recommended-by-d picture img{
  width: 100%;
  height: auto;
}
.favourites-page .label-recommended-by-d strong{
  font-size: 11px;
  font-weight: 600;
}
.favourites-page .product-card__text{
  order: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 53px;
  margin: 0 0 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-transform: uppercase;
}
.favourites-page .product-card__text-link{ color: var(--text); }
.favourites-page .product-card__expiring{
  order: 2;
  margin: 0 0 4px;
}
.favourites-page .product-card__old-price{
  order: 5;
  min-height: 17px;
  margin: 0;
  color: #6f7d90;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: line-through;
}
.favourites-page .product-card__prices{
  order: 6;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
  color: var(--primary);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
}
.favourites-page .product-card__prices--old{
  margin: 0;
  color: var(--primary);
  font-size: 13px;
  text-decoration: line-through;
}
.favourites-page .product-card__prices-title{ display: none; }
.favourites-page .product-card__prices-sep{
  color: inherit;
  text-decoration: none;
}
.favourites-page .product-card__price{
  color: var(--primary);
  font: inherit;
}
.favourites-page .product-card__prices--discounted .product-card__price,
.favourites-page .product-card:has(.product-card__label--discount) > .product-card__prices:not(.product-card__prices--old),
.favourites-page .product-card:has(.product-card__label--discount1) > .product-card__prices:not(.product-card__prices--old){
  color: #ff0000;
}
.favourites-page .product-card__price[style*="red"]{
  order: 2;
  margin: 0 0 4px;
  color: #ff0000 !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}
.favourites-page .product-card > br{ display: none; }
.favourites-page .product-card__buttons{
  position: absolute;
  right: 0;
  bottom: 25px;
  left: 0;
  order: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.favourites-page .product-card__button--compare{ display: none; }
.favourites-page .product-card__button--cart{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: url("../images-new/icons/icons_bg.png") center / cover no-repeat;
  color: #fff;
  filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, .28));
}
.favourites-page .product-card__button--cart::before{
  content: "";
  width: 24px;
  height: 24px;
  background: url("../images-new/icons/cart_icon.png") center / contain no-repeat;
}
.favourites-page .product-card__button--cart .product-card__button-icon{
  position: absolute;
  opacity: 0;
}
.favourites-page .white-box--alt > .icon-center{
  position: static;
  display: block;
  width: min(180px, 50vw);
  height: auto;
  margin: 24px auto 22px;
  transform: none;
}
.favourites-page .white-box--alt > .title--red{
  margin: 0;
  color: var(--danger);
  font-size: 24px;
}
.favourites-page .empty-basket-info{
  max-width: 520px;
  margin: 10px auto 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 767.98px){
  .favourites-page{
    padding-top: 8px;
    padding-bottom: 42px;
  }
  .favourites-page .white-box--alt{
    padding: 16px;
  }
  .favourites-page .favorites-list{
    grid-template-columns: repeat(2, minmax(0, 282px));
    gap: 22px;
  }
}

@media (min-width: 350px) and (max-width: 575.98px){
  .favourites-page .white-box--alt{
    padding: 8px;
    background: #f8f8f8;
  }
  .favourites-page .favorites-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .favourites-page .product-card{
    min-height: 400px;
    padding-right: 14px;
    padding-left: 14px;
  }
  .favourites-page .product-card__text{ font-size: 12px; }
  .favourites-page .product-card__prices{
    margin-bottom: 10px;
    font-size: 18px;
  }
  .favourites-page .product-card__prices--old{ font-size: 12px; }
}

@media (max-width: 575.98px){
  .favourites-page .product-card__label{
    height: auto;
    min-height: 18px;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.2;
  }
}

@media (max-width: 349.98px){
  .favourites-page .favorites-list{
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   TOAST NOTIFICATIONS — final new-site overrides
   Keeps the existing Toastr markup and hooks. Simple status messages and
   rich product messages share the same shell and mobile-menu close button.
   ===================================================================== */
#toast-container{
  width: auto;
  max-width: calc(100vw - 36px);
  pointer-events: none;
}
#toast-container.toast-top-right{
  top: 18px;
  right: 18px;
}
#toast-container .toast{
  pointer-events: auto;
}

/* Simple success / error message */
#toast-container .toast:not(.toast-warning){
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  width: 390px;
  max-width: 100%;
  min-height: 72px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(9, 52, 123, .12);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 14px 32px rgba(9, 52, 123, .16);
}
#toast-container .toast:not(.toast-warning):not(:has(.toast-icon)){
  grid-template-columns: minmax(0, 1fr) 42px;
}
#toast-container .toast:not(.toast-warning) .toast-message{
  display: contents;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
#toast-container .toast-icon{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 50%;
  background: #91bd88;
  box-shadow: 0 7px 14px rgba(80, 140, 82, .18);
}
#toast-container .toast-icon--error{
  background: var(--danger);
  box-shadow: 0 7px 14px rgba(237, 28, 36, .18);
}
#toast-container .toast-icon svg{
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* Same close control as the mobile mega menu. The existing SVG remains in
   the DOM for Toastr compatibility; the visible mark is the clearer ×. */
#toast-container .toast-close-button{
  position: relative;
  z-index: 2;
  order: 10;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
  opacity: 1;
  cursor: pointer;
  box-shadow: none;
  transition: filter .2s ease, transform .2s ease;
}
#toast-container .toast-close-button::before{
  content: "\00d7";
  display: block;
  line-height: 1;
}
#toast-container .toast-close-button svg{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
#toast-container .toast-close-button:hover{
  background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
  filter: brightness(1.08);
  transform: scale(1.05);
}
#toast-container .toast-close-button:focus-visible{
  outline: 3px solid rgba(9, 52, 123, .22);
  outline-offset: 3px;
}

/* Rich product toast: cart, Click & Collect, favourites and compare */
#toast-container .toast.toast-warning{
  position: relative;
  display: block;
  width: 400px;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}
#toast-container .toast.toast-warning .toast-message{
  display: block;
  margin: 0;
}
#toast-container .toast.toast-warning .toast-close-button{
  position: absolute;
  top: 13px;
  right: 13px;
  width: 42px;
  height: 42px;
  background: url('../images-new/icons/icons_bg.png') center / cover no-repeat;
}
#toast-container .toast-info{
  overflow: hidden;
  border: 1px solid rgba(9, 52, 123, .1);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 16px 38px rgba(9, 52, 123, .18);
}
#toast-container .toast-info__header{
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 15px 68px 15px 20px;
  border-bottom: 1px solid rgba(9, 52, 123, .1);
  background: linear-gradient(135deg, #f7f9fd 0%, #eef3fa 100%);
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
#toast-container .toast-info__body{
  padding: 18px 20px 16px;
}
#toast-container .toast-preview{
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
#toast-container .toast-preview__preview{
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 52, 123, .09);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
#toast-container .toast-preview__preview img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#toast-container .toast-preview__content{
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}
#toast-container .toast-preview__text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0 0 10px;
}
#toast-container .toast-preview__price{
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
#toast-container .toast-info__footer{
  padding: 0 20px 20px;
}
#toast-container .toast-info__footer .buttons-row{
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
#toast-container .toast-info__footer .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 210px;
  min-height: 46px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: url('../images-new/button_show_more.png') center / 100% 100% no-repeat;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  filter: drop-shadow(0 5px 10px rgba(12, 55, 113, .2));
}
#toast-container .toast-info__footer .button:hover,
#toast-container .toast-info__footer .button:focus-visible{
  color: #fff;
  filter: brightness(1.06) drop-shadow(0 7px 14px rgba(12, 55, 113, .25));
}

@media (max-width: 480px){
  #toast-container.toast-top-right,
  #toast-container.toast-top-left{
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
  #toast-container .toast:not(.toast-warning){
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 10px;
    width: 100%;
    padding: 10px;
  }
  #toast-container .toast-icon{
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }
  #toast-container .toast.toast-warning{
    width: 100%;
  }
  #toast-container .toast-info__header{
    min-height: 66px;
    padding: 14px 64px 14px 16px;
    font-size: 13px;
  }
  #toast-container .toast.toast-warning .toast-close-button{
    top: 12px;
    right: 12px;
  }
  #toast-container .toast-info__body{
    padding: 16px;
  }
  #toast-container .toast-preview{
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
  }
  #toast-container .toast-preview__preview{
    width: 82px;
    height: 82px;
  }
  #toast-container .toast-preview__price{
    font-size: 16px;
  }
  #toast-container .toast-info__footer{
    padding: 0 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce){
  #toast-container .toast-close-button{
    transition: none;
  }
}

#compare_page .icon-center {
  margin-left: auto; margin-right: auto;
}

/* ---------- /bg/gifts empty state ----------
   Преди съобщението висеше като гол ред body copy в .text (ляво подравнен,
   без surface). Тук е центрирана карта по общите токени на сайта. */
.gifts-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Иконата е stroke-базирана и се оцветява през --color5 (inline style в
   symbol-defs.svg), не през fill/color. viewBox е 40x32 — квадратният размер
   само я letterbox-ва, без деформация. */
.gifts-empty__icon{
  width: 48px;
  height: 48px;
  --color5: var(--muted-2);
}
.gifts-empty__title{
  margin: 0;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: var(--lh-tight);
}

@media (max-width: 767.98px){
  .gifts-empty{
    padding: 32px 16px;
  }
  .gifts-empty__icon{
    width: 40px;
    height: 40px;
  }
  .gifts-empty__title{
    font-size: var(--fs-18);
  }
}