/* Kora – Strona główna: złoto-czarny wygląd wg projektu 2026-10 (telefon), z odpowiednikiem na komputerze. */

/* Fonts (self-hosted, SIL OFL): Cormorant Garamond 500–600, Great Vibes */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/great-vibes-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/great-vibes-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --kora-gold: #b8924f;
  --kora-gold-light: #d9bd85;
  --kora-black: #15130f;
  --kora-cream: #f8f4ec;
  --kora-line: #e8dfcf;
  --kora-ink: #2a2520;
  --kora-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --kora-script: 'Great Vibes', 'Brush Script MT', cursive;
}

/* ---------- Top contact bar (all pages) ---------- */
.tvcmsdesktop-top-header,
.tvcmsmobile-top-wrapper { background: var(--kora-black) !important; }
.tvheader-nav-offer-text,
.tvheader-nav-offer-text p,
.tvheader-nav-offer-text strong { margin: 0; color: var(--kora-gold-light) !important; font-weight: 400; }
/* Cormorant defaults to old-style figures; phone numbers read better with lining ones */
.kora-topbar,
.kora-hero,
.kora-band,
.kora-caption { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.kora-topbar { display: flex; justify-content: center; align-items: center; gap: 0; font-family: var(--kora-serif); font-size: 18px; font-weight: 500; line-height: 1.3; }
.kora-topbar__item { padding: 4px 24px; border-left: 1px solid rgba(217, 189, 133, .35); text-align: center; white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1299px) {
  .kora-topbar { font-size: 16px; }
  .kora-topbar__item { padding: 4px 16px; }
}
.kora-topbar__item:first-child { border-left: 0; }
.kora-topbar__label { color: var(--kora-gold-light); font-weight: 600; margin-right: 6px; }
.kora-topbar__label .material-icons { display: none; }
.kora-topbar__item:last-child .kora-topbar__label::before { content: ''; display: inline-block; width: 17px; height: 12px; margin-right: 7px; vertical-align: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='12'%3E%3Crect width='17' height='12' rx='1' fill='%23d9bd85'/%3E%3Cpath d='M1 1l7.5 6L16 1' fill='none' stroke='%2315130f' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 17px 12px no-repeat; }
.kora-topbar a,
.tvheader-nav-offer-text a { color: #f3eadb !important; text-decoration: none; }
.kora-topbar a:hover { color: var(--kora-gold-light) !important; }

/* Phone: the bar always fits the screen width (theme wrapper adds 15 px side padding and an inline-block
   that grows with the text); text scales with the screen and wraps between words if a browser draws it wider. */
@media (max-width: 991px) {
  .tvcmsmobile-top-wrapper { padding: 10px 0 !important; }
  .tvcmsmobile-top-wrapper .tvmobileheader-offer-wrapper { padding: 0 8px !important; }
  .tvcmsmobile-top-wrapper .tvheader-nav-offer-text { display: block !important; width: 100%; padding: 0 !important; }
  .kora-topbar { width: 100%; align-items: stretch; justify-content: space-between; font-size: clamp(10px, 2.9vw, 13px); line-height: 1.35; }
  .kora-topbar__item { flex: 1 1 auto; min-width: 0; padding: 0 6px; white-space: normal; overflow-wrap: anywhere; display: flex; flex-direction: column; justify-content: center; }
  .kora-topbar__item:first-child { padding-left: 0; }
  .kora-topbar__item:last-child { padding-right: 0; flex: 0 0 auto; }
  .kora-topbar__item:not(:last-child) { flex: 1 1 0; }
  .kora-topbar a { white-space: nowrap; }
  .kora-topbar__label { display: block; margin: 0 0 3px; font-size: clamp(11px, 3.3vw, 14.5px); }
  .kora-topbar__item:last-child .kora-topbar__label::before { display: block; margin: 0 auto 3px; }
}

/* ---------- Header (all pages) ---------- */
.tvcmsmobile-header-menu-offer-text,
.tvcmsmobile-header-search-logo-wrapper,
.tvcmsdesktop-top-second { background: var(--kora-cream) !important; }
/* Logo is a JPG on white: blend it into the cream header */
#header img.logo { mix-blend-mode: multiply; }
/* Theme gives the mobile-header logo link a width only up to 650 px; on tablets it collapsed to 0 (no logo) */
#tvcmsmobile-header-logo .tv-header-logo a { width: 100%; }
/* Mobile header: lower logo bar */
.tvcmsmobile-header-menu-offer-text { min-height: 0 !important; }
#tvcmsmobile-header-logo a.tv-header-logo { padding: 8px 0 !important; }
#tvcmsmobile-header-logo img { max-height: 84px; width: auto !important; margin: 0 auto; }
.tvmobile-sliderbar-btn,
.tvmobile-sliderbar-btn a { background: transparent !important; box-shadow: none !important; }

/* Product page: big image opens the gallery (views/js/product.js) */
#product .product-cover .js-qv-product-cover,
#product .zoomContainer,
#product .zoomContainer * { cursor: zoom-in !important; } /* elevateZoom sets cursor: default inline on its window */
@media (max-width: 767px) { #product .images-container .js-thumb { cursor: zoom-in; } }
/* Theme's small grey "fullscreen" icon on the cover → visible round button with the same icon (same modal toggle) */
#product .product-cover .layer { top: auto !important; left: auto !important; right: 14px !important; bottom: 14px !important; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%232a2520' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E") center / 20px no-repeat !important; border: 1px solid var(--kora-line); box-shadow: 0 2px 8px rgba(21, 19, 15, .15); cursor: zoom-in; opacity: 1 !important; z-index: 20; }
#product .product-cover .layer i { display: none; }
#product .product-cover .layer:hover { border-color: var(--kora-gold-light); }
/* Page thumbnails as a scroll list without scrollbar (desktop, views/js/product.js) */
.tvvertical-slider .product-images.kora-thumbs-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.tvvertical-slider .product-images.kora-thumbs-scroll::-webkit-scrollbar { display: none; }
.tvvertical-slider.kora-thumbs-list .js-arrowsxx { display: flex !important; justify-content: center; gap: 4px; padding-top: 4px; }
/* Theme shows these icons only as slick arrows */
.tvvertical-slider.kora-thumbs-list .js-arrowsxx i { display: inline-block !important; width: auto; }
.tvvertical-slider.kora-thumbs-list .js-arrowsxx i,
#product-modal .js-modal-arrows i { cursor: pointer; }
.tvvertical-slider .kora-arrow-off,
#product-modal .kora-arrow-off { opacity: .25; cursor: default !important; }
/* Previous/next image buttons on the page cover and the modal image (views/js/product.js) */
.kora-nav { position: absolute; top: 50%; z-index: 20; width: 44px; height: 44px; margin-top: -22px; padding: 0; border-radius: 50%; border: 1px solid var(--kora-line); box-shadow: 0 2px 8px rgba(21, 19, 15, .15); cursor: pointer; background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%232a2520' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / 20px no-repeat; }
.kora-nav--prev { left: 12px; }
.kora-nav--next { right: 12px; transform: scaleX(-1); }
/* Page: a bit outside the image edges (cover has 15 px side padding); z-index stays under the modal backdrop (110) */
#product .product-cover .kora-nav--prev { left: -10px; }
#product .product-cover .kora-nav--next { right: -10px; }
.kora-nav:hover { border-color: var(--kora-gold-light); }
.kora-nav.kora-arrow-off { opacity: .3; cursor: default; }
.kora-nav:focus { outline: none; }
#product .product-cover { position: relative; }
@media (max-width: 767px) { #product .product-cover .kora-nav { display: none; } }
/* Gallery zoom on click (views/js/product.js) */
#product-modal .modal-body figure { overflow: hidden; position: relative; }
#product-modal .js-modal-product-cover { cursor: zoom-in; transition: transform .25s ease; }
#product-modal figure.kora-zoomed .js-modal-product-cover { cursor: zoom-out; transform: scale(2.5); }
/* Short description box under the modal image (empty frame on products without one); the page shows it anyway */
#product-modal .image-caption { display: none !important; }
/* Gallery modal: wide, image fills the screen height, thumbnails scroll (theme arrows move the list by `top`; views/js/product.js scrolls it instead) */
@media (min-width: 768px) {
  #product-modal .modal-dialog { width: min(1280px, 94vw) !important; max-width: none !important; left: 50% !important; transform: translateX(-50%) !important; margin: 20px 0 !important; }
  #product-modal .modal-body { display: flex !important; gap: 16px; align-items: flex-start; }
  #product-modal .modal-body figure { flex: 1 1 auto; min-width: 0; width: auto !important; max-width: none !important; margin: 0; }
  #product-modal .js-modal-product-cover { width: 100% !important; height: calc(100vh - 100px) !important; max-width: none !important; object-fit: contain; }
  #product-modal aside#thumbnails { flex: 0 0 150px; width: 150px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  #product-modal .js-modal-mask { max-height: calc(100vh - 136px) !important; overflow-y: auto !important; overflow-x: hidden; scrollbar-width: none; }
  #product-modal .js-modal-mask::-webkit-scrollbar { display: none; }
  #product-modal .js-modal-product-images { position: static !important; top: auto !important; transform: none !important; }
  /* Close button: theme puts it above the dialog, at the very top edge of the window – round button on the dialog corner */
  #product-modal .modal-header .close { top: -18px !important; right: -18px !important; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92) !important; border: 1px solid var(--kora-line); box-shadow: 0 2px 8px rgba(21, 19, 15, .15); opacity: 1; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: var(--kora-ink) !important; }
  #product-modal .modal-header .close span { color: var(--kora-ink) !important; font-size: 28px; line-height: 1; }
  #product-modal .modal-header .close:hover { border-color: var(--kora-gold-light); }
  #product-modal .js-modal-arrows { display: flex !important; justify-content: center; gap: 4px; padding-top: 8px; }
  /* Fixed thumb box before the lazy images load, so scrolling to the selected one lands right */
  #product-modal .js-modal-thumb { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
}

/* Back to top */
.tvbottom-to-top .tvbottom-to-top-icon { background: var(--kora-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Cpath d='M1 11l10-9 10 9' fill='none' stroke='%23d9bd85' stroke-width='1.6'/%3E%3C/svg%3E") center / 20px 11px no-repeat !important; border: 1px solid var(--kora-gold) !important; border-radius: 50% !important; }

/* ---------- Home page ---------- */
body#index,
#index #wrapper,
#index #wrappertop { background: var(--kora-cream); }
@media (max-width: 991px) {
  #index #wrappertop { padding-top: 0 !important; }
  #index #tvcms-mobile-view-header { border-bottom: 0 !important; }
}

/* Hero */
.kora-hero { position: relative; overflow: hidden; background: #efe6d6; margin: 0 0 30px; }
.kora-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.kora-hero__link { position: absolute; inset: 0; z-index: 2; }
.kora-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(248, 244, 236, .85) 0%, rgba(248, 244, 236, .55) 35%, rgba(248, 244, 236, 0) 60%); }
.kora-hero__inner { position: relative; z-index: 3; min-height: 460px; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.kora-hero__text { max-width: 560px; padding: 40px 0; }
.kora-hero__line1 { font-family: var(--kora-serif); font-weight: 600; font-size: 20px; letter-spacing: .35em; text-transform: uppercase; color: var(--kora-ink); }
.kora-hero__line2 { font-family: var(--kora-serif); font-weight: 600; font-size: 72px; line-height: 1; text-transform: uppercase; color: var(--kora-black); margin-top: 10px; }
.kora-hero__line3 { font-family: var(--kora-script); font-size: 92px; line-height: .9; font-weight: 400; font-synthesis: none; color: #9a7032; margin: 0 0 0 50px; text-shadow: none; -webkit-text-stroke: 0; }
.kora-hero__rule { display: block; width: 90px; height: 1px; background: var(--kora-gold); margin-top: 18px; }
.kora-hero__search { pointer-events: auto; }

/* Desktop: hero moved into the header (inline script in hero.tpl), logo/search/account bar over the photo, menu right below */
.kora-hero--header { margin: 0; height: clamp(480px, 36vw, 640px); display: flex; flex-direction: column; }
.kora-hero--header .kora-hero__text { padding: 20px 0; }
.kora-hero--header .kora-hero__line1 { font-size: 26px; letter-spacing: .3em; color: var(--kora-black); }
/* Account/cart as a box like the theme's search form (same border and height) so it stays readable on the photo */
.kora-hero--header .tv-contact-account-cart-wrapper { display: flex !important; align-items: center; justify-content: flex-end; gap: 18px; width: fit-content; height: 56px; margin: -1px 0 0 auto; padding: 0 18px; background: #fff; border: 2px solid rgba(0, 0, 0, .07); border-radius: 3px; }
.kora-hero--header .tv-cart-cart-inner { top: -3px !important; }
.kora-hero--header .tv-contact-account-cart-wrapper > * { height: auto !important; display: flex; align-items: center; }
.kora-hero--header #_desktop_cart,
.kora-hero--header .blockcart,
.kora-hero--header .tvheader-cart-wrapper:not(.sticky) { height: auto !important; }
.kora-hero--header .kora-hero__bg img { object-position: center 60%; }
.kora-hero--header .tvcmsdesktop-top-second { position: absolute; top: 0; left: 0; right: 0; z-index: 4; background: linear-gradient(180deg, rgba(248, 244, 236, .85), rgba(248, 244, 236, .45) 65%, rgba(248, 244, 236, 0)) !important; }
.kora-hero--header .tvcmsdesktop-top-second > .container { padding-top: 6px; padding-bottom: 18px; }
.kora-hero--header #tvcmsdesktop-logo img { max-height: 120px; width: auto; }
.kora-hero--header .kora-hero__inner { flex: 1; min-height: 0; padding-top: 110px; }
#header img.logo.kora-logo-clear { mix-blend-mode: normal; }

@media (max-width: 767px) {
  .kora-hero { margin: 0 0 22px; }
  .kora-hero__inner { min-height: 0; padding: 0 16px; }
  .kora-hero__text { padding: 30px 0 18px; }
  .kora-hero::before { background: linear-gradient(90deg, rgba(248, 244, 236, .8) 0%, rgba(248, 244, 236, .5) 40%, rgba(248, 244, 236, 0) 70%); }
  .kora-hero__line1 { font-size: 13px; letter-spacing: .3em; }
  .kora-hero__line2 { font-size: 42px; margin-top: 6px; }
  .kora-hero__line3 { font-size: 64px; margin: 2px 0 0 6px; }
  .kora-hero__rule { width: 70px; margin-top: 10px; }
  .kora-hero__search { padding: 0 0 70px; }
  .kora-hero__search .tvcmsmobile-header-search { padding: 0 !important; float: none; width: 100%; }
  .kora-hero__search .tvheader-top-search-wrapper,
  .kora-hero__search .tvheader-top-search-wrapper-info-box,
  .kora-hero__search form { background: #fffdf9 !important; border-color: var(--kora-gold-light) !important; border-radius: 2px; }
  .kora-hero__search input[type="text"] { background: transparent !important; font-family: var(--kora-serif); font-size: 18px !important; color: var(--kora-ink); }
  .kora-hero__search .tvheader-search-btn { border-left: 1px solid var(--kora-gold-light) !important; background: transparent !important; }
  .kora-hero__search .tvheader-search-btn svg,
  .kora-hero__search .tvheader-search-btn i { color: var(--kora-gold) !important; fill: var(--kora-gold) !important; }
}

/* "Kategorie" heading above the slider */
#index .tvcmsheader-verticalmenu .tvcategory-title-wrapper { background: var(--kora-black) !important; }
#index .tvcmsheader-verticalmenu .tvleft-right-title,
#index .tvcmsheader-verticalmenu .tvleft-right-title span { font-family: var(--kora-serif); font-weight: 600; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--kora-gold-light) !important; }
#index .tvcmsheader-verticalmenu .tvleft-right-title-toggle i { color: var(--kora-gold-light) !important; }

@media (max-width: 1199px) {
  #index .tvcmsheader-verticalmenu .tvcategory-title-wrapper { background: transparent !important; border: 0 !important; box-shadow: none !important; position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 0 !important; }
  #index .tvcmsheader-verticalmenu .tvleft-right-title { display: flex; align-items: center; flex: 1; gap: 18px; margin: 0; padding: 0 44px 0 0 !important; background: transparent !important; }
  #index .tvcmsheader-verticalmenu .tvleft-right-title::before,
  #index .tvcmsheader-verticalmenu .tvleft-right-title::after { content: ''; flex: 1; height: 1px; background: var(--kora-gold); }
  #index .tvcmsheader-verticalmenu .tvleft-right-title span { font-size: 28px; font-weight: 500; letter-spacing: .14em; color: #6e5a43 !important; }
  #index .tvcmsheader-verticalmenu .tvleft-right-title-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  #index .tvcmsheader-verticalmenu .tvleft-right-title-toggle i { color: var(--kora-black) !important; font-size: 30px; }
}

/* Slider as photo cards with a caption */
#index .tvcms-main-slider #tvmain-slider { border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(21, 19, 15, .18); }
#index .tvcms-main-slider .tvslider-list { position: relative; display: block; }
#index .tvmain-slider-content-inner.kora-caption { position: absolute !important; left: 0; right: auto; top: auto !important; bottom: 12%; transform: none !important; width: auto; max-width: 70%; margin: 0; padding: 14px 26px 16px; background: rgba(21, 19, 15, .78); text-align: left; display: block !important; opacity: 1 !important; visibility: visible !important; }
#index .kora-caption .tvmain-slider-contant { position: static !important; transform: none !important; padding: 0; margin: 0; width: auto; text-align: left; }
#index .kora-caption .tvmain-slider-title { font-family: var(--kora-serif); font-weight: 500; font-size: 34px; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; text-align: left !important; color: #fff !important; margin: 0; max-width: 9em; opacity: 1 !important; visibility: visible !important; animation: none !important; }
#index .kora-caption .tvmain-slider-info,
#index .kora-caption .tvmain-slider-btn { display: none; }
#index .kora-caption .tvmain-slider-contant::after { content: ''; display: block; width: 150px; height: 9px; margin-top: 10px;
  background: linear-gradient(var(--kora-gold), var(--kora-gold)) 22px 4px / 128px 1px no-repeat,
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Cpath d='M0 4.5h24M20 1l4 3.5-4 3.5' fill='none' stroke='%23d9bd85' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 26px 9px no-repeat; }

@media (max-width: 767px) {
  #index .tvmain-slider-content-inner.kora-caption { bottom: 10%; padding: 10px 16px 12px; }
  #index .kora-caption .tvmain-slider-title { font-size: 24px; }
  #index .kora-caption .tvmain-slider-contant::after { width: 120px; background-size: 98px 1px, 26px 9px; }
}

/* Brands */
#index .tvcmsbrandlist-slider .tvbrandlist-slider-block { background: #fff; border: 1px solid var(--kora-line); border-radius: 8px; box-shadow: 0 2px 10px rgba(21, 19, 15, .05); }
#index .tvcmsbrandlist-slider .tvbrandlist-slider-wrapper-info { box-shadow: none !important; border: 0 !important; background: transparent !important; }
#index .tvcmsbrandlist-slider .owl-item + .owl-item .tvbrandlist-slider-wrapper-info { border-left: 1px solid var(--kora-line) !important; }
#index .tvcmsbrandlist-slider .tvcmsprev-btn,
#index .tvcmsbrandlist-slider .tvcmsnext-btn { width: 44px; height: 44px; border-radius: 50% !important; border: 1px solid var(--kora-gold-light) !important; background: #fffdf9 !important; color: var(--kora-gold) !important; display: flex; align-items: center; justify-content: center; box-shadow: none !important; }
#index .tvcmsbrandlist-slider .tvcmsprev-btn i,
#index .tvcmsbrandlist-slider .tvcmsnext-btn i { color: var(--kora-gold) !important; }

/* Band with the slogan (first block of displayHome) */
.kora-band { background: var(--kora-black); padding: 18px 16px; margin: 0 0 30px; text-align: center; }
.kora-band span { display: inline-flex; align-items: center; gap: 22px; font-family: var(--kora-script); font-size: 34px; line-height: 1.2; color: var(--kora-gold-light); }
.kora-band span::before,
.kora-band span::after { content: ''; width: 80px; height: 1px; background: var(--kora-gold); flex: none; }
@media (max-width: 767px) {
  .kora-band { margin: 22px calc(50% - 50vw); padding: 14px 10px; }
  .kora-band span { font-size: 22px; gap: 12px; white-space: nowrap; }
  .kora-band span::before,
  .kora-band span::after { width: 36px; }
}