/* jk-steel — industrial steel restyle, loaded automatically by PrestaShop core
   after theme.css (priority 1000 > 50), no theme.yml registration needed. */

:root {
  --jks-graphite: #242B33;      /* header, nav, dark surfaces */
  --jks-graphite-dark: #1C2127; /* footer, darkest surfaces */
  --jks-steel-blue: #5C7080;    /* secondary links / hover */
  --jks-spark: #FF6A13;         /* accent CTA / prices / active states */
  --jks-spark-dark: #E85A00;    /* CTA hover */
  --jks-bg-light: #F2F3F4;
  --jks-text: #1C1E22;
}

/* ---------- Global ---------- */

html {
  overflow-x: hidden;
}

body {
  background-color: var(--jks-bg-light);
  overflow-x: hidden;
}

/* Default PrestaShop demo cyan (#24b9d7) replaced sitewide */
a {
  color: var(--jks-steel-blue);
}

a:hover {
  color: var(--jks-spark) !important;
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

.btn-primary,
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus {
  background-color: var(--jks-spark) !important;
  border-color: var(--jks-spark) !important;
}

.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.open > .btn-primary.dropdown-toggle {
  background-color: var(--jks-spark-dark) !important;
  border-color: var(--jks-spark-dark) !important;
}

.btn-secondary {
  background-color: transparent !important;
  color: var(--jks-graphite) !important;
  border: 1px solid var(--jks-graphite) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--jks-graphite) !important;
  color: #fff !important;
}

/* ==========================================================================
   1. HEADER — single merged row (logo + main menu + search + utility),
   fixed contrast bug from round 1, softened depth instead of a hard divider
   ========================================================================== */

#header {
  /* subtle brushed-steel texture under the gradient. First attempt used
     background-blend-mode:overlay, but overlay on a base this dark behaves
     almost like multiply (barely visible) — math, not a loading bug. Fix:
     make the gradient semi-transparent so the texture actually shows
     through by simple alpha compositing instead. */
  background-image:
    linear-gradient(180deg, rgba(42, 50, 60, .68) 0%, rgba(36, 43, 51, .78) 100%),
    url('/img/homepage/brushed-steel.jpg') !important;
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: normal, normal;
  color: #E8EAEC;
  /* stronger spark accent: a brighter top edge line with a soft glow
     underneath it, instead of a thin flat line */
  box-shadow:
    0 2px 0 rgba(255, 106, 19, .65),
    0 0 26px rgba(255, 106, 19, .3),
    0 10px 28px rgba(0, 0, 0, .35) !important;
}

/* theme.css has "#header a{color:#232323}" at higher specificity than the
   generic `a` rule — override for every link anywhere in the header. */
#header a {
  color: #E8EAEC;
}

#header a:hover {
  color: var(--jks-spark) !important;
}

#header .material-icons {
  color: inherit;
}

#header .shopping-cart {
  color: #E8EAEC !important;
}

#header .blockcart {
  height: auto;
  background: transparent !important;
  border-radius: 0;
  transition: background-color .15s ease;
}

#header .blockcart:hover {
  background: rgba(255, 255, 255, .1) !important;
}

#header .top-menu a[data-depth="0"] {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: #E8EAEC;
}

#header .top-menu a[data-depth="0"] .jks-menu-label {
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease;
}

#header .top-menu a[data-depth="0"]:hover .jks-menu-label {
  border-color: var(--jks-spark);
}

/* Image clips itself to a circle (border-radius on the <img>), so the
   wrapper no longer needs overflow:hidden — which frees us to hang the
   ring pseudo-element directly off .jks-navbar-thumb with inset:-Npx.
   That guarantees perfect alignment with the thumb itself regardless of
   the parent <a>'s padding (which is what threw the ring off before, when
   it was positioned relative to the <a> instead). */
.jks-navbar-thumb {
  display: block;
  width: 34px;
  height: 34px;
  margin-right: .5rem;
  flex-shrink: 0;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.jks-navbar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  filter: grayscale(.5);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease, filter .35s ease;
}

.jks-navbar-thumb::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px dashed transparent;
  pointer-events: none;
  transition: border-color .3s ease;
}

#header .top-menu a[data-depth="0"]:hover .jks-navbar-thumb img {
  transform: scale(1.15);
  border-color: var(--jks-spark);
  box-shadow: 0 0 0 3px rgba(255, 106, 19, .22), 0 4px 14px rgba(0, 0, 0, .4);
  filter: grayscale(0);
}

#header .top-menu a[data-depth="0"]:hover .jks-navbar-thumb::before {
  border-color: var(--jks-spark);
  animation: jks-ring-spin 4s linear infinite;
}

@keyframes jks-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Nav dropdown (subcategory flyout on hover, e.g. Clothes >
   Men/Women) — was a completely unstyled white/light Bootstrap popover
   with grey text. Recolored, given a slide-down entrance instead of a flat
   opacity snap, and a growing "weld bead" accent bar per link on hover.
   (Dropped the spark top-edge glow — it read as decoration disconnected
   from the actual category list underneath it.) ---------- */
.top-menu .sub-menu,
.top-menu .popover {
  background: linear-gradient(135deg, #2A323C 0%, var(--jks-graphite) 60%, #1A1F25 100%) !important;
  border: 0 !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .45) !important;
  transform: translateY(2px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease !important;
}

/* Invisible bridge filling the visual gap created by the translateY offset
   below — it's generated content of .sub-menu itself, so the mouse stays
   "inside" the dropdown (and its parent li) while crossing that gap,
   instead of the menu closing right before the cursor reaches it. */
.top-menu .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
  background: transparent;
}

#_desktop_top_menu .top-menu[data-depth="0"] li:hover .sub-menu {
  /* nudge the whole flyout down a bit from the position JS computes right
     against the nav row — gives it a bit of breathing room instead of
     sitting flush against the header */
  transform: translateY(18px);
}

.top-menu .sub-menu ul[data-depth="1"] > li {
  position: relative;
}

.top-menu .sub-menu ul[data-depth="1"] > li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 255, 255, .12);
}

.top-menu .sub-menu .dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  color: #E8EAEC !important;
  text-transform: uppercase;
  font-size: .875rem;
  letter-spacing: .12em;
  font-weight: 700;
  background: transparent !important;
  padding: .75rem 2.75rem .75rem 1.75rem !important;
  transition: color .2s ease, padding-left .2s ease, background-color .2s ease;
}

.jks-submenu-thumb {
  display: block;
  width: 44px;
  height: 44px;
  margin-right: .9rem;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}

.jks-submenu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.3);
  transition: filter .2s ease;
}

.top-menu .sub-menu .dropdown-item:hover .jks-submenu-thumb img {
  filter: grayscale(0);
}

.top-menu .sub-menu .dropdown-item::after {
  content: "\2192";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  font-weight: 400;
  transform: translate(-6px, -50%);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.top-menu .sub-menu .dropdown-item:hover::after,
.top-menu .sub-menu .dropdown-item:focus::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.top-menu .sub-menu .dropdown-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--jks-spark);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .25s ease;
}

.top-menu .sub-menu .dropdown-item:hover,
.top-menu .sub-menu .dropdown-item:focus {
  color: var(--jks-spark) !important;
  background: rgba(255, 255, 255, .05) !important;
  padding-left: 2.25rem !important;
}

.top-menu .sub-menu .dropdown-item:hover::before,
.top-menu .sub-menu .dropdown-item:focus::before {
  transform: scaleY(1);
  transform-origin: top;
}

.top-menu .sub-menu .dropdown-item.active {
  color: var(--jks-spark) !important;
  background: rgba(255, 255, 255, .07) !important;
}

/* This is a full-width nav flyout, not a tooltip pointing at a specific
   trigger — the classic Bootstrap popover arrow (two overlapping triangles
   via ::before/::after) has no reason to exist here and was rendering as
   a stray dark "hourglass" shape below the box. Remove it outright. */
.popover::before,
.popover::after {
  display: none !important;
}

/* ---------- Single-row layout ---------- */

#header .jks-header-bar {
  padding: 1.1rem 0;
}

/* Stretch the header content edge-to-edge like the hero slider, instead of
   being boxed into Bootstrap's fixed-width .container. */
#header .jks-header-bar .container {
  width: 100%;
  max-width: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.jks-header-bar__row {
  flex-wrap: nowrap;
}

#_desktop_logo {
  margin-right: 1.5rem;
  flex-shrink: 0;
}

.header-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;
  min-width: 0;
  gap: 2.5rem;
  width: auto !important;
}

#_desktop_top_menu {
  flex-shrink: 0;
}

.header-top-right #search_widget {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 8rem;
  min-width: 3rem;
  max-width: 24rem;
  margin-left: auto;
}

#_desktop_top_menu .top-menu {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.jks-header-bar__utility {
  display: flex;
  align-items: center;
  margin-left: 1.25rem;
  gap: 1.25rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.jks-header-bar__util-item {
  display: flex;
  align-items: center;
}

.jks-header-bar__util-item:first-child {
  opacity: .78;
}

.jks-header-bar__util-item:first-child:hover {
  opacity: 1;
}

.jks-header-bar__util-item a {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.jks-header-bar__utility .right-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ---------- Search bar — restyled to match the brand (was basically
   unstyled in theme.css: a plain grey box capped at 13rem) ---------- */

#search_widget {
  width: 100%;
}

#search_widget form {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 !important;
}

/* modules/ps_searchbar/ps_searchbar.css ships its own "#search_widget form
   input" rule (ID selector, specificity 1-0-2) which beat our old
   class-based selector (1-... no ID) for background/border/radius — only
   the :focus state (which had !important) was getting through. Match it
   with an ID selector of our own (1-1-1 beats 1-0-2) instead of leaning on
   !important. */
#search_widget input[type="text"] {
  width: 100%;
  height: 2.5rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  color: #E8EAEC;
  padding: 0 2.5rem 0 2.25rem;
  font-size: .875rem;
  transition: border-color .15s ease, background-color .15s ease;
}

#search_widget input[type="text"]::placeholder {
  color: #9AA3AC;
}

#search_widget input[type="text"]:focus {
  background: rgba(255, 255, 255, .09);
  border-color: var(--jks-spark);
  outline: none;
}

#search_widget .material-icons.search {
  position: absolute;
  left: .5rem;
  /* measured via CDP pixel analysis: the Material Icons glyph sits ~7.5px
     below the true visual center of its own em-box, so plain
     translateY(-50%) centering looks visibly off — correct with a fixed
     pixel offset instead of guessing a percentage. */
  top: calc(50% - 7.5px);
  transform: translateY(-50%);
  font-size: 1.15rem;
  line-height: 1;
  color: #9AA3AC;
  pointer-events: none;
}

#search_widget .material-icons.search {
  transition: color .15s ease;
}

/* search icon comes BEFORE the input in the DOM, so use :focus-within on
   the form rather than a sibling combinator */
#search_widget form:focus-within .material-icons.search {
  color: var(--jks-spark);
}

#search_widget .material-icons.clear {
  position: absolute;
  right: .75rem;
  top: calc(50% - 7.5px);
  transform: translateY(-50%);
  font-size: 1.05rem;
  line-height: 1;
  color: #9AA3AC;
  cursor: pointer;
}

#search_widget .material-icons.clear:hover {
  color: var(--jks-spark);
}


/* ---------- Logo (img/logo_jk_steel.png, edge-feathered onto the dark header) ---------- */

.jks-logo {
  display: inline-flex;
  align-items: center;
}

.jks-logo__img {
  height: 4rem;
  width: auto;
  max-width: none;
  display: block;
}

@media (max-width: 767px) {
  .jks-logo__img {
    height: 3rem;
  }
}

/* ==========================================================================
   2. HOMEPAGE — section headers, product cards, badges
   ========================================================================== */

/* Section title "weld line" accent — now also applied via template override
   to ps_categoryproducts / ps_crossselling <h2> (added products-section-title
   class there), so every product-grid section on the site is visually consistent */
.page-content h1,
.products-section-title,
.h1.products-title {
  display: inline-block;
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--jks-spark);
}

section.featured-products {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.all-product-link {
  text-transform: uppercase;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--jks-graphite) !important;
  border-bottom: 1px solid var(--jks-graphite);
  padding-bottom: 1px;
}

.all-product-link:hover {
  color: var(--jks-spark) !important;
  border-color: var(--jks-spark);
}

/* Product cards */

.thumbnail-container {
  border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: box-shadow .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}

.thumbnail-container:hover,
.thumbnail-container:focus {
  border-color: var(--jks-spark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.product-title,
.product-title a {
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--jks-text);
}

.product-title a:hover {
  color: var(--jks-spark) !important;
}

/* Badges: default teal/orange PS demo colors → brand palette */
.product-flags li.product-flag {
  border-radius: 0;
  background: var(--jks-graphite);
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.on-sale {
  background-color: var(--jks-spark);
}

/* ---------- Prices ---------- */

.product-price,
.current-price,
.current-price-value,
span.price {
  color: var(--jks-spark) !important;
  font-weight: 700;
}

/* ==========================================================================
   3. CATEGORY / LISTING PAGE
   ========================================================================== */

/* ---------- Kill the scattered white "card" boxes floating on the grey
   page (sidebar blocks + category header) — same reasoning as the
   subcategories fix below: let content sit in the page flow instead of
   disconnected white panels. ---------- */
#search_filters,
#search_filters_brands,
#search_filters_suppliers,
.block-categories,
.block-category {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#category #left-column #search_filters {
  border-top: 0 !important;
}

/* ---------- Subcategory tiles (was plain Bootstrap card + cyan hover border) ---------- */

#subcategories {
  margin-bottom: 2rem;
  padding-top: 1.5rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#subcategories .subcategory-heading {
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--jks-spark);
}

/* No neutral Bootstrap grey here — same visual language as the product
   cards (.thumbnail-container): transparent border + shadow by default,
   brand-color border only on hover. */
#subcategories ul li .subcategory-image a {
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  overflow: hidden;
  display: block;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: border-color .15s ease, box-shadow .15s ease;
}

#subcategories ul li .subcategory-image a img {
  transition: transform .3s ease, filter .3s ease;
  filter: grayscale(.25);
}

#subcategories ul li:hover .subcategory-image a {
  padding: 0;
  border-color: var(--jks-spark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

#subcategories ul li:hover .subcategory-image a img {
  transform: scale(1.05);
  filter: grayscale(0);
}

#subcategories ul li .subcategory-name {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--jks-text);
}

#subcategories ul li .subcategory-name:hover {
  color: var(--jks-spark) !important;
}

.products-selection {
  background: #fff;
  padding: .75rem 1rem;
  border: 1px solid #e5e5e5;
}

.facet-dropdown.open > .select-title,
.facet-dropdown .select-title:focus {
  border-color: var(--jks-spark) !important;
}

.facet-dropdown .select-list:hover {
  background: var(--jks-spark) !important;
}

.facet-title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--jks-spark);
  padding-bottom: .4rem;
  display: inline-block;
}

.custom-checkbox input[type="checkbox"]:checked + span,
.custom-radio input[type="radio"]:checked + span {
  background-color: var(--jks-spark) !important;
  border-color: var(--jks-spark) !important;
}

/* Pagination */

.page-link {
  color: var(--jks-graphite);
  border-radius: 0 !important;
}

.page-link:hover {
  color: var(--jks-spark-dark);
  background-color: var(--jks-bg-light);
}

.page-item.active .page-link,
.page-item.active .page-link:hover {
  background-color: var(--jks-spark) !important;
  border-color: var(--jks-spark) !important;
  color: #fff !important;
}

/* ==========================================================================
   4. PRODUCT DETAIL PAGE
   ========================================================================== */

.product-add-to-cart .btn-primary,
.product-add-to-cart .add-to-cart {
  font-size: 1rem;
}

.tabs .nav-tabs {
  border-bottom: 2px solid #e5e5e5;
}

.tabs .nav-tabs .nav-link {
  text-transform: uppercase;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--jks-steel-blue);
  border: none;
  border-bottom: 3px solid transparent;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  color: var(--jks-graphite);
  background: transparent;
  border-color: var(--jks-spark);
}

#product-images li.thumb-container img,
.product-cover-thumbnails img {
  border-radius: 0 !important;
}

#product-images li.thumb-container.selected img,
#product-images li.thumb-container:hover img {
  border: 2px solid var(--jks-spark);
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

#footer {
  background: var(--jks-graphite-dark) !important;
  color: #C7CCD1;
}

#footer a {
  color: #C7CCD1 !important;
}

#footer a:hover {
  color: var(--jks-spark) !important;
}

.jks-copyright {
  font-size: .75rem;
  color: #8A929B;
}

.jks-copyright a {
  color: #8A929B !important;
}

.jks-copyright a:hover {
  color: var(--jks-spark) !important;
}

.jks-copyright__sep {
  margin: 0 .5rem;
  opacity: .6;
}

.jks-copyright__agency {
  font-weight: 600;
}

#footer .h3,
#footer .footer-title {
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--jks-spark);
  display: inline-block;
  margin-bottom: 1rem;
}

.block-newsletter,
.block_newsletter {
  background: var(--jks-graphite) !important;
  border: none;
  border-left: 3px solid var(--jks-spark);
  padding: 1.5rem 1.75rem;
  flex: 0 0 100%;
  max-width: 100%;
}

.block-social:has(ul:empty) {
  display: none;
}

.block-newsletter > .row,
.block_newsletter > .row {
  align-items: center;
}

.block-newsletter #block-newsletter-label,
.block_newsletter #block-newsletter-label {
  color: #fff;
  font-weight: 600;
  margin-bottom: 0;
  text-wrap: balance;
}

.block-newsletter input[type="email"],
.block_newsletter input[type="email"] {
  background: var(--jks-graphite-dark);
  color: #E8EAEC;
  border: 1px solid rgba(255, 255, 255, .15);
}

#footer .social-sharing a,
#footer a.share-icon {
  color: #C7CCD1;
  background: transparent;
}

#footer .social-sharing a:hover {
  color: var(--jks-spark);
}

/* ==========================================================================
   HERO SLIDER — full-bleed carousel (6 process photos), built on the
   classic theme's existing Bootstrap carousel JS + its .carousel{width:100vw}
   full-bleed rule (see ps_imageslider override for markup)
   ========================================================================== */

.jks-hero-slider {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.jks-hero-slider__carousel {
  width: 100% !important;
  left: auto !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background-color: transparent !important;
}

.jks-hero-slider__carousel .carousel-inner {
  height: 82vh;
  min-height: 480px;
  max-height: 760px;
}

.jks-hero-slider__carousel .carousel-item {
  height: 100%;
  position: relative;
}

.jks-hero-slider__carousel .carousel-item img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* ---------- Layering — this was the bug behind the "washed out" text:
   the scrim used to be a plain sibling DIV of #jksHeroCarousel, living in
   .jks-hero-slider's stacking context, while the caption lives *inside*
   .carousel-item (a different, nested stacking context). z-index:1 on the
   scrim made it beat the whole carousel (z-index:auto), painting over
   everything including the caption text — not just darkening the photo
   behind it. Fix: make the scrim a ::before on .carousel-item itself, so
   it's a genuine DOM sibling of .jks-slide-caption (::after, below) and
   their z-index values (1 vs 2) are compared directly, guaranteed. */
.jks-hero-slider__carousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 18, 22, .35) 0%, rgba(15, 18, 22, .55) 55%, rgba(15, 18, 22, .82) 100%);
}

/* Brief, crisp flash at the cut — screen-blended so it brightens rather
   than sitting as an opaque curtain, and short enough (350ms) to read as
   a camera-flash beat, not a lingering glow. */
@keyframes jks-strobe {
  0% { opacity: 0; }
  10% { opacity: .9; }
  100% { opacity: 0; }
}

.jks-hero-slider__carousel .carousel-item.active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  mix-blend-mode: screen;
  animation: jks-strobe .35s ease-out forwards;
  pointer-events: none;
}

/* No sliding — the whole point is a flash + instant cut, not a photo
   sliding across the screen. Keep the "left" transition property (so
   Bootstrap's JS, which waits for `transitionend` to finish the slide
   cycle, still gets its event) but make it functionally instant. */
.jks-hero-slider__carousel .carousel-inner > .carousel-item {
  transition-duration: .01s !important;
}

.jks-slide-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  pointer-events: none;
}

.jks-hero-slider__carousel .carousel-indicators {
  z-index: 4;
  margin-bottom: 0;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.5rem;
}

.jks-hero-slider__carousel .carousel-indicators li {
  flex: 1 1 0;
  max-width: 72px;
  height: 3px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .28);
  position: relative;
  overflow: hidden;
  text-indent: 0;
  cursor: pointer;
}

.jks-hero-slider__carousel .carousel-indicators li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--jks-spark);
}

.jks-hero-slider__carousel .carousel-indicators li.active::after {
  animation: jks-progress 5.5s linear forwards;
}

.jks-hero-slider__carousel .carousel-indicators.jks-paused li.active::after {
  animation-play-state: paused;
}

@keyframes jks-progress {
  from { width: 0%; }
  to { width: 100%; }
}

.jks-hero-slider__carousel .direction {
  z-index: 5;
}

@keyframes jks-caption-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.carousel-item .jks-hero__inner {
  opacity: 0;
}

.carousel-item.active .jks-hero__inner {
  animation: jks-caption-in .7s ease-out .2s forwards;
}

.jks-hero__inner {
  max-width: 720px;
  pointer-events: auto;
  /* Photos vary a lot in brightness/busyness — a fixed top-to-bottom scrim
     isn't enough to guarantee legible text over every slide (e.g. the laser
     beam slide). A dedicated dark backdrop panel behind the text guarantees
     contrast regardless of what's in the photo. */
  background: rgba(12, 14, 17, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2.5rem 3rem;
  border-radius: 0;
}

.jks-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  color: var(--jks-spark);
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.jks-hero__title {
  font-size: 2.75rem;
  line-height: 1.15;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 1.25rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.jks-hero__subtitle {
  font-size: 1.05rem;
  color: #E8EAEC;
  margin-bottom: 2rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.jks-hero__cta {
  display: inline-block;
  width: auto;
  padding: .9rem 2.5rem !important;
  font-size: .95rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

@media (max-width: 767px) {
  .jks-hero__inner {
    padding: 1.75rem 1.5rem;
  }
}

@media (max-width: 767px) {
  .jks-hero-slider__carousel .carousel-inner {
    height: 62vh;
    min-height: 420px;
  }

  .jks-hero__title {
    font-size: 1.9rem;
  }

  .jks-slide-caption {
    padding: 0 1.25rem;
  }
}

/* ---------- Hide leftover demo content (pastel promo banner + lorem ipsum block) ---------- */

a.banner,
#custom-text {
  display: none !important;
}

/* Homepage breadcrumb ("Strona główna") is pointless clutter right before
   the hero slider, and its padding/margin was the visible gap under the
   header — drop it only on the homepage. */
/* The breadcrumb ("Strona główna") sits as a SIBLING before #content, not
   inside it — .page-home never matched it. body carries "page-index" for
   the homepage controller; target that instead. Its padding/margin was the
   real source of the visible gap under the header. */
.page-index .breadcrumb {
  display: none !important;
}

/* Confirmed via CDP getBoundingClientRect: theme.css sets #wrapper{padding-top:
   1.563rem} (25px) globally, for breathing room under the header on inner
   pages — that's exactly the gap above the hero on the homepage. Homepage
   only, since other pages want that spacing. */
.page-index #wrapper {
  padding-top: 0 !important;
}