/* shared  */
.wcag-toolbar {
  display: inline-flex;
  /* gap: 0.5rem; */
  align-items: center;
  padding: 5px;
}
.wcag-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.wcag-btn {
  background: #fff;
  color: #000;
  padding: 0.15rem 0.35rem;
  line-height: 1;
  height: 25px;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: transform 0.12s ease-in-out, color 0.12s ease-in-out;
}
.wcag-btn:hover,
.wcag-btn:focus-visible {
  color: #fff;
  background: #000;
  outline: 2px solid orange;
  outline-offset: 2px;
}
.wcag-btn.is-on {
  outline: 4px solid orange;
  outline-offset: 4px;
}
.wcag-indicator {
  display: inline-grid;
  place-items: center;
}
.wcag-indicator .val,
.wcag-indicator .label {
  grid-area: 1/1;
  transition: opacity 0.12s ease-in-out;
}
.wcag-indicator .label {
  opacity: 0;
}
.wcag-indicator .val {
  opacity: 1;
}
.wcag-indicator:hover .val,
.wcag-indicator:focus .val {
  opacity: 0;
}
.wcag-indicator:hover .label,
.wcag-indicator:focus .label {
  opacity: 1;
  background: #000;
  color: #fff;
}

#cj_headertopcontent {
  --wcag-header-comp: 1;
}
body.wcag-scale #cj_headertopcontent {
  font-size: calc(1rem * var(--wcag-header-comp, 1));
}
body.wcag-scale #cj_headertopcontent :not(.wcag-toolbar):not(.wcag-toolbar *) {
  font-size: 1em !important;
}
body.wcag-scale #cj_headertopcontent .wcag-toolbar {
  transform: scale(var(--wcag-toolbar-scale, 1));
  transform-origin: left center;
}
body.wcag-scale #cj_headertopcontent .wcag-toolbar * {
  font-size: inherit !important;
}

/* global */
body.wcag-scale {
  --wcag-base: 14px;
}
body.wcag-scale main,
body.wcag-scale footer,
body.wcag-scale .page-footer,
body.wcag-scale #cart,
body.wcag-scale #metaldeals {
  --tz: var(--wcag-factor, 1);
}
body.wcag-scale main :where(h1, h2, h3, h4, h5, h6) {
  line-height: calc(1.15 + (var(--tz) - 1) * 0.45) !important;
}
body.wcag-scale main :where(p, li, dd, dt, small) {
  line-height: calc(1.35 + (var(--tz) - 1) * 0.55) !important;
}
body.wcag-scale main :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd) {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
body.wcag-scale main :where(.btn, .button, .badge, .label) {
  white-space: normal !important;
}
body.wcag-scale main :where(.card, .product-miniature, .product, .blog-item) {
  height: auto !important;
  overflow: visible !important;
}

/* btn 'czytaj wiecej' */
body.wcag-scale main :where(.btn, .btn-primary) {
  width: auto !important;
}

body.wcag-scale
  :where(
    #cj_htmlindexblock > div > div > div p,
    #cj_opinie .global.carousel .carousel-item p,
    #cj_metalzbyt_homepage .blurb-container > div > p
  ) {
  height: auto !important;
  max-height: fit-content !important;
}

/* quotes main pg*/
body.wcag-scale #cj_opinie .carousel-item svg.quote,
body.wcag-scale #cj_opinie .carousel-item img[alt="quote"] {
  display: none !important;
}

body.wcag-scale
  main
  :where(
    .product-miniature .product-title,
    .product-miniature .product-description,
    .product-title,
    .product-description
  ) {
  max-height: none !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
body.wcag-scale
  main
  :where(
    .product-price,
    .product-prices,
    .current-price,
    .add-to-cart,
    .highlighted-informations
  ) {
  white-space: normal !important;
}
body.wcag-scale main :where([class*="col-"], .columns, .row) {
  min-height: 0;
}

body.wcag-scale :is(#blockcart-modal, .modal) {
  --tz: var(--wcag-factor, 1);
}

body.wcag-scale
  :is(#blockcart-modal, .modal)
  :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    small,
    em,
    strong,
    a,
    span,
    label,
    button
  ) {
  font-size: calc(var(--wcag-base) * var(--tz)) !important;
  line-height: calc(1.35 + (var(--tz) - 1) * 0.55) !important;
}

body.wcag-scale
  #blockcart-modal
  :where(.btn, .cart-content .value, .cart-content .label) {
  font-size: calc(var(--wcag-base) * var(--tz)) !important;
}

body.wcag-scale p.cart-products-count {
  display: none !important;
}

body.wcag-scale main img,
body.wcag-scale main svg,
body.wcag-scale main video,
body.wcag-scale main canvas {
  transform: none !important;
}
body.wcag-scale
  main
  :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    dt,
    dd,
    blockquote,
    small,
    em,
    strong,
    a,
    span,
    label,
    button,
    input,
    select,
    textarea,
    th,
    td,
    .blog-shortinfo,
    .exceedstock-warning
  ) {
  font-size: calc(var(--wcag-base) * var(--tz)) !important;
}

body.wcag-scale main .omnibusInfo,
.initial-content,
.collapsible-content {
  font-size: calc(var(--wcag-base) * var(--tz)) !important;
  line-height: calc(var(--wcag-base) * var(--tx)) !important;
}

body.wcag-scale
  .metaldeals
  :where(
    b,
    span,
    .description,
    .dateInfo,
    .ribboncode,
    .ribboninfo,
    .promo,
    .getCode,
    .nameInfo,
    .priceInfo,
    .leftInfo,
    .rightInfo,
    .col-sm-12
  ) {
  font-size: calc(var(--wcag-base) * var(--tz)) !important;
}
body.wcag-scale
  #cart
  :where(
    .title,
    .card-title,
    .cart-summary-title,
    .cart-summary-line,
    .cart-summary-line .label,
    .cart-summary-line .value,
    .cart-detailed-subtotals,
    .cart-detailed-subtotals .label,
    .cart-detailed-subtotals .value,
    .black-promo .cart-voucher .collapse-button,
    .cart-detailed-actions,
    .cart-total,
    .text-sm-center *,
    .block-promo *
  ) {
  font-size: calc(var(--wcag-base) * var(--tz)) !important;
}
body.wcag-scale .titleParams,
body.wcag-scale .tab-pane p,
body.wcag-scale .product-other-information,
body.scag-scale .tab-content,
body.wcag-scale .description,
body.wcag-scale .description-warriaty,
body.wcag-scale .bottom-blurbs .blurb-item > div {
  font-size: calc(var(--wcag-base) * var(--tz)) !important;
}

.cart-detailed-subtotals * {
  font-size: calc(var(--wcag-base) * var(--tz)) !important;
}

/* top-menu fold */
@media (min-width: 992px) {
  body.wcag-scale #header .header-top-right {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    column-gap: 20px;
    row-gap: 10px;
  }

  body.wcag-scale #header .menu.js-top-menu {
    grid-column: 1 / -1;
  }

  body.wcag-scale #header .menu.js-top-menu .top-menu > li {
    white-space: nowrap;
  }

  body.wcag-scale #header #search_widget,
  body.wcag-scale #header .search-widget {
    grid-column: 1;
    min-width: 0;
    width: 100%;
    justify-self: stretch;
    z-index: auto;
  }
}

body.wcag-scale #header .header-top-right .material-icons,
body.wcag-scale #header .header-top-right .icon {
  font-size: 1em;
}
/* orange vertical bar */

body.wcag-scale h1.title::before,
body.wcag-scale h2.title::before,
body.wcag-scale h2.section-title::before,
body.wcag-scale h2.products-section-title::before,
body.wcag-scale h3.title::before {
  height: 1.2em;
}

/* kat. hamburger menu */
body.wcag-scale i.material-icons.d-inline {
  position: relative;
}

body.wcag-scale #header .header-top {
  margin-bottom: clamp(8px, (var(--wcag-factor, 1) * 24px, 24px));
}

body.wcag-scale .breadcrumb {
  margin-top: 6em !important;
}

@media (max-width: 767.98px) {
  body.wcag-scale .icons-row span,
  body.wcag-scale .icons-row a,
  body.wcag-scale .icons-row .page-subheading,
  body.wcag-scale .icons-row [class*="title"],
  body.wcag-scale .icons-row [class*="label"],
  body.wcag-scale .icons-row > div {
    font-size: 14px !important;
  }
}

@media (min-width: 768px) {
  body.wcag-scale #header .header-nav {
    z-index: 999;
  }
}

/* cart badge  */
body.wcag-scale #header #_desktop_cart .cart-products-count {
  position: absolute !important;
  top: -0.1em !important;
  right: -1em !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  translate: none !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 12px !important;
  z-index: auto !important;
}

body.wcag-scale #header #_desktop_cart .header {
  position: relative !important;
  display: inline-block;
}

body.wcag-scale a.dropdown-item,
body.wcag-scale a.productshowmenu {
  background-color: transparent !important;
}