/* ------------------------------------------------------------------ *
 * Arilis — overrides for the purchased template (static mock-up v4)
 * Developer: Site Done · https://sitedone.tech
 *
 * The template is left alone. What is here exists because the theme was drawn
 * for a parts shop and a drone shop needs one or two things it does not have.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Category strip
 *
 * The template's icon font is a parts catalogue in itself — calipers, turbochargers,
 * engine oil — so the strip uses the client's own drone pack instead, inlined
 * so it can be recoloured. The tile is centred as a column: icon, name,
 * count, each under the middle of the one above, and every tile the same
 * height whether its name runs to one line or two (client, 2026-08-22).
 * ------------------------------------------------------------------ */
.ar-icon {
  width: 1em;
  height: 1em;
  display: block;
}
/* The tile is a square — the template gives it aspect-ratio: 1 — so it is
   always taller than what stands in it, and the only question is where the
   slack goes. Centred: the same air above the icon as below the count
   (client, 2026-08-23). Before this the block was pinned to the top and the
   count pushed to the bottom, which left a hole in the middle of every tile
   whose name fitted on one line. */
.category-v01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  gap: 0;
}
.category-v01 .cate-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  color: var(--text-primary);
  transition: color .25s ease, transform .25s ease;
}
.category-v01:hover .cate-icon {
  color: var(--primary);
  transform: translateY(-2px);
}
/* The name gets a box two lines tall whether it needs one or two, and sits
   in the middle of it. That is what balances the row: icons line up, counts
   line up, and a one-line name no longer leaves a hole under itself where
   the second line would have been — the count used to be pushed to the
   bottom of the tile and stood 55px away from a short name against 29px
   from a long one (client, 2026-08-23).

   text-align is stated here rather than inherited: inside a centred flex
   column the paragraph shrinks to its own width, and a name that wraps
   would otherwise set flush left. */
.category-v01 .cate-name {
  margin: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.category-v01 .cate-count {
  margin: 14px 0 0;
  text-align: center;
}
.flat-spacing-4 .swiper .swiper-slide {
  height: auto;
}

/* ------------------------------------------------------------------ *
 * Slideshow
 *
 * The template's own slides are studio shots with a dark half where the words
 * go. The client's photographs are daylight — a field at sunrise, a tea
 * plantation, sky — and white type sank into all three. A scrim from the
 * brand navy carries the words and fades out before it reaches the subject,
 * which in every one of these pictures sits to the right.
 * ------------------------------------------------------------------ */
.slideshow-v01 .sld-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 50, 111, .82) 0%, rgba(5, 50, 111, .55) 34%, rgba(5, 50, 111, .1) 62%, rgba(5, 50, 111, 0) 78%);
  pointer-events: none;
}
.slideshow-v01 .sld-image {
  position: relative;
}
.slideshow-v01 .sld-content {
  z-index: 2;
}

/* ------------------------------------------------------------------ *
 * The quick-pick band
 *
 * Stands where the template put its vehicle picker, so it keeps the same
 * centred row on one line at desktop width and wraps on a phone.
 * ------------------------------------------------------------------ */
.ar-quick-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ar-quick-pick .tf-btn {
  gap: 10px;
}
.ar-quick-pick .pill-icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.ar-quick-pick .btn-outline {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--line);
}
.ar-quick-pick .btn-outline:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}
/* On a phone the theme stacks this row one tile per line, which costs half a
   screen. Two columns: five categories and the telephone make three tidy
   rows (client, 2026-08-23). The selector carries the theme's own class as
   well, because that is where display: grid comes from. */
@media (max-width: 991px) {
  .banner-check-fit .content.ar-quick-pick {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* The label has to be allowed to take a second line. In Polish these five
     are one word each; in English and Ukrainian two of them are not —
     "Cameras and gimbals", "Мікрофони та аудіо" — and the tile was a fixed
     42px, so the second line simply fell out of the box (client, 2026-08-27).

     A floor rather than a fixed height, and the floor is two lines tall: the
     tiles that need one line and the tiles that need two then come out the
     same size, and the grid stays a grid. The type comes down a step so two
     lines fit without the tile growing again.

     --h is how this template carries a button height; both it and the plain
     property are set, because a theme that is copied over again may write
     either. */
  .ar-quick-pick .tf-btn {
    width: 100%;
    --h: auto;
    height: auto;
    min-height: 54px;
    padding: 8px;
    align-items: center;
  }
  .ar-quick-pick .tf-btn > span {
    font-size: 14px;
    line-height: 18px;
  }
}

/* On a phone the slide is as tall as the theme's floor makes it — 450px of
   photograph for 200px of words. A quarter off (client, 2026-08-23): the
   picture still reads and the first products come into view sooner. */
@media (max-width: 767px) {
  .sld-image img {
    min-height: 338px;
  }
}

/* ------------------------------------------------------------------ *
 * The phone's header and tab rows
 * ------------------------------------------------------------------ */

/* The account icon goes from the header on these widths — everything it led
   to is in the slide-out menu (client, 2026-08-23). */
@media (max-width: 991px) {
  .nav-icon-list > li.ar-account {
    display: none;
  }
}

/* ------------------------------------------------------------------ *
 * The bottom bar, on a handle
 *
 * It was taken away altogether on 2026-08-23: the client wanted the phone
 * screen given to the page rather than to two rows of chrome. It comes back
 * on 2026-08-29 as something the shopper opens — a small handle at the foot
 * of the screen, and the bar rides up out of it and stays until the same
 * handle puts it away.
 *
 * Which is the right shape for it. All five of its destinations are one tap
 * away already — search and basket in the fixed header, account, wishlist and
 * comparison in the menu — so it has not earned a permanent row on anybody's
 * screen; as a handle it costs twenty-two pixels and is there for whoever
 * wants it.
 *
 * It slides rather than appears, and it is moved with a transform so the
 * browser can hand the work to the compositor: a fixed row that animates its
 * height repaints the page under it on every frame.
 *
 * Above 991px neither the bar nor the handle exists — the header has room for
 * all of it there.
 * ------------------------------------------------------------------ */
.tf-toolbar-bottom,
.ar-bar-tab {
  display: none;
}

@media (max-width: 991px) {
  :root {
    --ar-bar-h: 64px;
    --ar-bar-tab-h: 22px;
  }

  .tf-toolbar-bottom {
    display: flex;
    position: fixed;
    z-index: 1035;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--ar-bar-h);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }

  body.ar-bar-on .tf-toolbar-bottom {
    transform: none;
  }

  /* The handle. Centred, and shaped like something to pull rather than
     something to press by accident: it sits on the bar's top edge and rides
     up with it. */
  .ar-bar-tab {
    position: fixed;
    z-index: 1036;
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: var(--ar-bar-tab-h);
    padding: 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: var(--white);
    color: var(--text-primary);
    box-shadow: 0 -4px 14px rgba(19, 41, 89, .1);
    transform: translateX(-50%);
    transition: bottom .28s cubic-bezier(.22, .61, .36, 1);
    cursor: pointer;
  }

  body.ar-bar-on .ar-bar-tab {
    bottom: var(--ar-bar-h);
  }

  /* Drawn rather than a glyph: this control is built by script, and an icon
     font that has not arrived yet shows as a box. */
  .ar-bar-tab::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    border-radius: 1px;
    transform: translateY(2px) rotate(45deg);
    transition: transform .28s ease;
  }

  body.ar-bar-on .ar-bar-tab::before {
    transform: translateY(-2px) rotate(-135deg);
  }

  /* Whatever else lives in that corner steps over the bar rather than under
     it — the button back to the top, and the chat bubble if one is running. */
  body.ar-bar-on #goTop,
  body.ar-bar-on .progress-wrap {
    bottom: calc(var(--ar-bar-h) + 16px);
  }

  /* And the page keeps its last line reachable: without this the footer's
     bottom row sits under the bar with no way to scroll to it. */
  body.ar-bar-on {
    padding-bottom: var(--ar-bar-h);
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .tf-toolbar-bottom,
  .ar-bar-tab,
  .ar-bar-tab::before {
    transition: none;
  }
}

/* The three links at the foot of the page do not fit one phone line, and the
   credit was breaking mid-phrase — "Realizacja: Site / Done" — while pushing
   the two legal links apart. The credit takes a line of its own, and its
   separator goes with it (client, 2026-08-23). */
@media (max-width: 767px) {
  .footer-bottom .tf-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }
  .footer-bottom .ar-credit-sep {
    display: none;
  }
  .footer-bottom .ar-credit {
    flex-basis: 100%;
    text-align: center;
  }
}

/* The tab row scrolls sideways on a phone — that is the theme's doing and it
   is right — but the scrollbar it draws under the tabs reads as a stray grey
   rule across the design. The row still scrolls; the bar is just not drawn. */
.list-tab-btn-v2 {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.list-tab-btn-v2::-webkit-scrollbar {
  display: none;
}

/* ------------------------------------------------------------------ *
 * The catalogue button on the white header
 *
 * The template gives this button two skins, both drawn for a coloured
 * ground: a translucent white pill for the navy header and a solid navy one
 * (style-2) for the white header. On a white strip the solid navy block sat
 * heavier than the logo beside it, so this variant is white as well —
 * outlined rather than filled, the same outline the quick-pick pills wear —
 * and fills with navy when it is hovered or open (client, 2026-08-23).
 * ------------------------------------------------------------------ */
.btn-nav-drop.ar-light {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--line);
  /* A pixel off each side of the template's padding, so an outlined button
     stands exactly as tall as the filled one on the other header. */
  padding: 9px 15px;
}
.btn-nav-drop.ar-light:hover,
.btn-nav-drop.ar-light.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
}

/* The left cell of this header is capped at 200px in the theme, which is the
   logo and nothing else — the button hung out of it and over the search
   field. It is given the room it needs; the search keeps the rest.

   The button also carries its own air on the right: the cell ends where the
   button ends, so without it the hairline before the search stood flush
   against the button (client, 2026-08-23). */
@media (min-width: 992px) {
  .header-v2 .header-inner_wrap .header-left {
    max-width: none;
    width: auto;
    /* 21px between the logo and the button (client, 2026-08-23). */
    gap: 21px;
  }
  .header-v2 .header-left .nav-category-wrap {
    margin-right: 24px;
  }
}

/* The vertical hairlines in the header are drawn by the theme as a one-pixel
   wide block of colour. A block that narrow lands wherever the flex layout
   puts it, and on a screen whose pixel ratio is not a whole number it gets
   smeared over two device columns — which is why the two rules around the
   search looked heavier than the ones between the icons, though the CSS was
   the same for both. Drawn as a border instead, the same way the product
   cards draw theirs, the browser has one edge to snap and the line comes out
   at one pixel everywhere (client, 2026-08-23). */
.tf-header .br-line.type-vertical::before {
  width: 0;
  background: none;
  border-left: 1px solid var(--line);
}

/* ------------------------------------------------------------------ *
 * The header goes above the pinned columns
 *
 * The theme gives its header z-index 100 — and 201 below 1200px — while every
 * pinned column on the site is one of Bootstrap's own .sticky-*-top helpers,
 * which are 1020. So the filter column on the catalogue, the menu in the
 * account, the order box in the basket and the table of contents on a legal
 * page were all painting over the header: open the catalogue menu and the
 * column showed straight through it.
 *
 * 1030 is Bootstrap's own figure for a fixed header, which is what this is —
 * above the pinned things, below the drawers and dialogs at 1045 and up, so
 * the basket panel and the mobile menu still cover it.
 * ------------------------------------------------------------------ */
header.tf-header {
  z-index: 1030;
}

/* The language and currency menus hang out of the strip above the header and
   land on top of it, so at 1030 the header was painting over them and they
   read as menus that do not open (client, 2026-08-27).

   Only what the strip opens is raised, not the strip itself: the strip has to
   go on passing underneath the header as the page scrolls, and lifted as a
   whole it would slide over it for the fifty-odd pixels the two overlap. */
.tf-topbar .dropdown-menu {
  z-index: 1040;
}

@media (max-width: 1199px) {
  header.tf-header {
    z-index: 1030;
  }
}

/* ------------------------------------------------------------------ *
 * The sticky header
 *
 * Only the middle row travels down the page (client, 2026-08-23): logo,
 * catalogue button, search and the icons. The menu row is dropped while the
 * header is stuck — 56px of chrome that the catalogue button already covers
 * — and the top strip never was part of the header, it scrolls away with the
 * page. What sticks is one 64px band instead of two.
 * ------------------------------------------------------------------ */
.tf-header.header-fixed .header-bottom {
  /* !important because the row carries Bootstrap's own d-xl-block. */
  display: none !important;
}

/* Out of the flow while it is stuck, with a spacer of its full height left
   behind — see the block in eu-v4.js that inserts it.

   The theme leaves the header position:sticky, which keeps its box in the
   flow; dropping the menu row then makes the document 56px shorter above the
   reader, Chrome moves the scroll back to compensate, and that lands you the
   other side of the threshold. The row comes back, the scroll moves forward,
   and the page rocks between the two for as long as you stay there. Fixed
   plus a spacer means the flow never changes and the circle cannot start. */
.tf-header.header-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

/* The header stays on a phone (client, 2026-08-27). Out of the flow the
   whole time on these widths; the spacer eu-v4.js keeps holds its place, so
   the page below it is where it always was. */
@media (max-width: 1199.98px) {
  header.tf-header {
    position: fixed;
    left: 0;
    right: 0;
    /* Not the script's to decide — see the note above. */
    top: 0 !important;
  }

  /* And the gap it leaves in the flow. The variable is kept by eu-v4.js at the
     header's measured height; the fallback is what that height is on every
     phone width, so the first paint is right before any script has run. */
  .ar-head-spacer {
    height: var(--ar-head-h, 60px) !important;
  }
}

.ar-head-spacer {
  height: 0;
}

/* ------------------------------------------------------------------ *
 * Sentence case
 *
 * The template capitalises Every Word In A Product Name And An Article Title,
 * which is an English convention. Polish capitalises the first word and
 * proper nouns and nothing else, and it mangles model names too — "DJI Mini 5
 * Pro Fly More Combo" is a name, not a sentence to re-case. The copy is
 * already written with the right capitals, so the transform is turned off.
 * ------------------------------------------------------------------ */
.card-product_info .name-product,
.article-blog .entry-title,
.canvas-header,
.tf-dropdown-sort .btn-select,
.tf-dropdown-sort .select-item,
.meta-filter-shop .filter-tag,
.meta-filter-shop .remove-all-filters {
  text-transform: none;
}

/* ------------------------------------------------------------------ *
 * The row of switched-on filters
 *
 * A chip and the "clear all" button are the same kind of thing — press it,
 * a filter goes — so they have to read as one row. The template gave them
 * different metrics: the chip inherited the body's 16/26 and the button
 * carries .text-caption-01 at 14/22, which made the chip 33,7px tall and
 * the button 29,7px. Four pixels apart on one line is the wobble the client
 * saw (2026-08-29); the corners were the other half of it, the button
 * rounded and the chip square.
 *
 * So both are set from the same numbers rather than left to inherit, and the
 * height is fixed instead of computed from whatever the text turns out to be:
 * 22 + 8 + 2 = 32px, whichever of the two it is.
 * ------------------------------------------------------------------ */
.meta-filter-shop .filter-tag,
.meta-filter-shop .remove-all-filters {
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 22px;
  border-radius: var(--ar-radius);
}

/* The cross is an icon-font glyph, and a glyph carries its font's own
   ascent and descent — enough to sit a fraction low next to Latin text.
   Giving it a box of its own and centring inside that box takes the
   typeface out of the question. */
.meta-filter-shop .filter-tag .icon,
.meta-filter-shop .remove-all-filters .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 11px;
  line-height: 1;
}

/* On a phone the control bar sticks to the top of the screen while the grid
   scrolls under it, so it holds the two things worth reaching for there and
   nothing else: filters on the left, grid-or-list on the right (client,
   2026-08-23). Sorting and the sale tick-box stay on wider screens.
   The 60px the theme leaves between the page title and that bar is a
   desktop measure; on a phone it is a screenful of nothing. */
@media (max-width: 991px) {
  .flat-spacing-3 {
    padding-top: 24px;
  }
  /* Standing still: filters, view mode, sorting. Once the bar is stuck to
     the top of the screen, sorting steps out and leaves the two controls a
     thumb reaches for. */
  /* The whole right-hand cell goes, not just the dropdown inside it: the bar
     wraps, and an empty cell still claims a second row — which is what left
     twelve pixels of air under the buttons and pushed them off centre
     (client, 2026-08-23). */
  .tf-shop-control.is-stuck .col-right {
    display: none;
  }
  .tf-shop-control .col-left {
    width: 100%;
    justify-content: space-between;
  }
  .tf-shop-control.is-stuck {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* The page moves with the wheel, everywhere (client, 2026-08-23). The theme
   smooths scrolling twice over: scroll-behavior on the document and the
   Lenis plugin on top of it. Both look handsome standing still and both
   stutter on a long page, so the stylesheet turns off the first and the
   build drops the second. */
html {
  /* !important because the theme's own declaration on the same element kept
     winning in the browser whatever the order of the files said. */
  scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------ *
 * The product page: two ways to buy
 *
 * The basket takes the row the theme built for it, and the telephone panel
 * stands open underneath. There used to be a second button, "kup teraz", that
 * revealed the panel; it was dropped (client, 2026-08-24) because the panel
 * asks for one field and hiding it behind a button only added a click.
 * ------------------------------------------------------------------ */
.ar-buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ar-buy-row .btn-action-price {
  flex: 1 1 150px;
  white-space: nowrap;
}

/* The template leaves 60px between the breadcrumb and the product; on this
   page that is an empty band above the photograph (client, 2026-08-24). */
.section-product-single.flat-spacing-3 {
  padding-top: 20px;
}

/* The thumbnail strip is exactly as tall as a thumbnail, and Swiper hides
   what sticks out — so the frame each thumbnail draws around itself lost its
   bottom line (client, 2026-08-24). Two pixels of room underneath and one
   above is all it needs. */
.tf-product-media-thumbs {
  padding-top: 1px;
  padding-bottom: 2px;
}

/* Initials where the template puts a stock portrait: the review is written
   for the mock-up, and a stranger's face over words nobody said would be a
   second untruth on top of the first. */
.cmt_image.ar-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: .04em;
}
@media (max-width: 767px) {
  .ar-buy-row .wg-quantity {
    flex: 0 0 auto;
  }
  /* A definite basis, not auto: with the theme's w-100 the basket button
     measured itself against the whole row and pushed the quantity box onto
     a line of its own. */
  .ar-buy-row .btn-action-price {
    flex: 1 1 140px;
    width: auto;
  }
}

/* The telephone panel: one field, one button, and a line that says what
   happens next. It sits in the same grid as everything else in this column,
   so the 24px gap above it comes from the theme — no margin of its own, or
   it would drift away from the basket button it belongs to. */
.ar-quick {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.ar-quick_title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.ar-quick_note {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.ar-quick_form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ar-quick_field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding-left: 12px;
}
.ar-quick_prefix {
  color: var(--text-secondary);
  font-weight: 500;
  padding-right: 8px;
}
/* The theme styles inputs through a long list of type selectors, so the
   field needs its own weight to keep the prefix from being written over. */
.ar-quick .ar-quick_field input.ar-quick_tel {
  flex: 1;
  height: 46px;
  border: 0;
  background: transparent;
  padding: 0 12px 0 0;
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: .02em;
}
.ar-quick .ar-quick_field input.ar-quick_tel:focus {
  outline: none;
  box-shadow: none;
}
.ar-quick_field:focus-within {
  border-color: var(--text-primary);
}
.ar-quick .ar-quick_tel.is-wrong,
.ar-quick_field:has(.is-wrong) {
  border-color: var(--primary);
}
.ar-quick_form .tf-btn {
  flex: 0 0 auto;
}
.ar-quick_done {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: 500;
}
.ar-quick_done .icon {
  color: #16a34a;
  font-size: 18px;
}

/* ------------------------------------------------------------------ *
 * The photo bench — foto.html only
 *
 * A working tool: a list of the places a photograph can go, a wall of the
 * photographs, and the list of what was chosen. Deliberately plain, and it
 * leaves the file the day the pictures are settled (client, 2026-08-24).
 * ------------------------------------------------------------------ */
.ar-bench {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 400;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(19, 41, 89, .18);
  overflow: hidden;
}
.ar-bench_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: var(--text-primary);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ar-bench_head .icon {
  transition: transform .25s ease;
}
.ar-bench.is-open .ar-bench_head .icon {
  transform: rotate(180deg);
}
.ar-bench_body {
  display: none;
  padding: 12px 14px 14px;
  max-height: min(70vh, 620px);
  overflow-y: auto;
}
.ar-bench.is-open .ar-bench_body {
  display: block;
}
.ar-bench_hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.ar-bench_slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ar-bench_slot {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font-size: 11px;
  line-height: 15px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}
.ar-bench_slot.is-set {
  border-color: var(--text-primary);
  color: var(--text-primary);
}
.ar-bench_slot.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
}
.ar-bench_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.ar-bench_photo {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  aspect-ratio: 16 / 10;
}
.ar-bench_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ar-bench_photo.is-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-secondary);
}
/* A corner mark on the ones from the dark folder, so the two batches can be
   told apart at thumbnail size. */
.ar-bench_photo.is-dark::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
}
.ar-bench_photo.is-active {
  border-color: var(--primary);
}
.ar-bench_foot {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ar-bench_out {
  margin-top: 10px;
  padding: 10px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 11px;
  line-height: 16px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------------------------------------------ *
 * Catalogue sidebar
 *
 * The count belongs to the name it follows, not to the edge of the column,
 * and it needs a space in front of it — the theme lays these links out as
 * flex boxes, where the space in the markup is thrown away.
 * ------------------------------------------------------------------ */
.cate-link_list a {
  display: flex;
  gap: 5px;
}

/* ------------------------------------------------------------------ *
 * The two wide plates
 *
 * The template's own plates are dark lifestyle photographs with white type
 * over them. Ours are products on white, so the white type disappeared. A
 * gradient from the brand navy carries the words and leaves the top of the
 * frame — where the product is — alone.
 * ------------------------------------------------------------------ */
/* The tint carries the words and stops there (client, 2026-08-24). It was
   briefly laid over the whole frame, which read as a filter on the
   photograph rather than as a ground for the text; now it is strongest under
   the heading and the button on the left and gone by two thirds across, so
   the drone on the right is a drone again.

   The split block gets none at all: its words sit beside the photograph, not
   on it. */
.collection-v01 .cls-image::after,
.banner-v01 .bn-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19, 41, 89, .88) 0%, rgba(19, 41, 89, .74) 30%, rgba(19, 41, 89, .28) 55%, rgba(19, 41, 89, 0) 72%);
  pointer-events: none;
  z-index: 1;
}
.banner-v01 .bn-image {
  position: relative;
}
.banner-v01 .bn-content {
  z-index: 2;
}
/* No position of our own on .cls-image — the template already takes it out of
   the flow with inset:0, and making it relative dropped the whole plate's
   text below a full-height picture. */
.collection-v01 .cls-content {
  z-index: 2;
}

/* ------------------------------------------------------------------ *
 * Product cards
 *
 * Names here are long — "DJI Mini 5 Pro Fly More Combo Plus (DJI RC 2)" —
 * where the template's were three or four words. Two lines is what a card can
 * give them before the price row drifts out of line with its neighbours.
 * ------------------------------------------------------------------ */
/* Two lines, always — clamped from above and reserved from below. The
   reserve matters most on a phone, where the cards sit two to a row: with
   one name on a line and its neighbour's on two, the prices and the buttons
   stood a line apart across the row (client, 2026-08-23). */
.card-product .name-product {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 48px;
}

/* The frame that appears around a card on hover is drawn by the theme at two
   pixels, against the one-pixel rule that separates the cards at rest. The
   card jumped a pixel wider on every hover and the outline read as heavy.
   One pixel, like everything else on the page (client, 2026-08-23). */
.card-product::after {
  border-width: 1px;
}

/* On hover the theme slides an add-to-cart bar out of the bottom of the card
   — by design it hangs below the frame (`bottom: -50px`). In a grid that put
   it underneath the next row: the neighbour's photograph and its discount
   badge painted straight over the button, because siblings later in the
   document win when nothing sets an order. The hovered cell is lifted above
   its neighbours for as long as the pointer is on it (client, 2026-08-23).

   The number has to clear the theme's own: on the catalogue page it numbers
   the cells 29, 28, 27… from the top so that each row overlaps the one
   below, and a hovered cell at 5 sank underneath its neighbours instead of
   rising above them — the frame and the button came out sliced. */
.tf-grid-layout > *:hover,
.tf-grid-layout > *:focus-within {
  position: relative;
  z-index: 40;
}

/* The catalogue page's filtering reads the printed price with parseFloat,
   which stops at the space in "2 616,18 zł". Each price on that page
   therefore carries the same number again in a form a machine can read,
   ahead of the printed one and out of sight. Not display:none — the script
   reads .text(), and text() skips nothing but hidden-by-clip is fine. */
.ar-price-key,
.ar-hidden-data {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The category line above the name is a real category from the shop, and
   some of them are two words longer than "WHEELS". */
.card-product .product-cate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ *
 * Logo
 *
 * The mark is wider than the template's own, so the header cell is given the
 * room rather than the image being squashed into 141px.
 * ------------------------------------------------------------------ */
.logo-site img {
  width: auto;
  height: 36px;
  max-width: none;
}
@media (max-width: 575px) {
  .logo-site img {
    height: 30px;
  }
}

/* ------------------------------------------------------------------ *
 * Brand navy
 *
 * The template draws its blue in #1d358f. The logotype the client settled on
 * is #132959 — darker, quieter, and the one colour the mark is actually
 * printed in — so the whole variant follows it: headings, links, buttons,
 * the drone glyphs in the category strip, everything the theme paints in
 * --text-primary (client, 2026-08-22).
 *
 * Overridden here rather than edited into styles.css: that file is the
 * template's, and an edit inside it disappears without trace the day the
 * assets are re-copied.
 * ------------------------------------------------------------------ */
:root {
  --text-primary: #132959;
}

/* The two places the theme writes the old navy out in full instead of going
   through the variable. Neither is on this page — an order-status badge and
   the sticky add-to-cart bar of a product page — but they are the difference
   between "replaced globally" and "replaced where I happened to look". */
.tb-order_status.stt-delivery {
  background: rgba(19, 41, 89, .1);
  color: #132959;
}
.tf-sticky-btn-atc {
  box-shadow: 0 0 8px 8px rgba(19, 41, 89, .12);
}

/* --- typeface -----------------------------------------------------------
   Nunito Sans everywhere (client, 2026-08-29). The template set its body in
   Barlow and a few blocks in Manrope; both are replaced here rather than
   inside styles.css, so the swap survives the template's assets being copied
   over again. The face itself, and which family each of --ar-font and
   --ar-text points at, is declared in v4/fonts/fonts.css.

   It replaces Segoe UI Semibold, which only Windows had — so the interface
   was one typeface on the client's desk and another on every phone. This one
   the shop carries itself, and it is a variable font: the template's own
   weights, 400 through 700, are real weights again rather than the single
   semibold cut the old family collapsed them all into.

   The icon font and Swiper's arrows keep their own families — those are glyph
   sets, not text. */

:root {
  --bs-font-sans-serif: var(--ar-font);
}

body,
.font-main,
.font-manrope,
.hover-tooltip .tooltip {
  font-family: var(--ar-font);
}

/* ------------------------------------------------------------------ *
 * Rounded corners — 5px (client, 2026-08-24)
 *
 * The template is an auto-parts skin and draws most of its furniture with
 * square corners. Everything below is a button, a field or a frame that had
 * none; five pixels is enough to take the edge off without turning the page
 * into a set of pills.
 *
 * Deliberately left alone: the hairlines and underline animations (they are
 * one-pixel bars, a radius on them shows as a smudge), the tooltip and
 * dropdown arrows, scrollbar thumbs, progress bars, and anything already
 * round — avatars, the monogram, the slider dots. Blocks the template had
 * already rounded at 4 or 8px keep their own value; at this size the
 * difference does not read.
 * ------------------------------------------------------------------ */
:root {
  --ar-radius: 5px;
}

/* Buttons and the icon squares that behave like them. */
.tf-btn,
.tf-btn-square,
.tf-sw-nav,
.btn-nav-drop,
.btn-close-popup,
.form-search-nav .btn-action_submit,
.form-v1 .btn-action_submit,
.meta-filter-shop .remove-all-filters,
.tf-control-layout .tf-view-layout-switch,
.product-action_list .box-icon,
.tf-compare-list .tf-compare-item .icon,
.card-product .box-action_add,
.list-tab-btn-v2 .tf-btn-tab {
  border-radius: var(--ar-radius);
}

/* Fields. The quantity box draws its frame with a pseudo-element, so both
   the box and the frame have to agree — the box already clips its content. */
.form-search-nav input,
.form-v1 input,
.filter-price .price-val_wrap,
.wg-quantity,
.wg-quantity::before {
  border-radius: var(--ar-radius);
}

/* Frames and panels. */
.category-v01,
.card-product::after,
.card-product::before,
.card-product_wrapper .product-img,
.box-nav-category,
.sub-menu,
.modal .modal-content,
.modal-share .wrap-code,
.sidebar-filter,
.tf-shop-control,
.tf-toolbar-bottom,
.tf-product-support-box,
.tf-product-support-box .ic-wrap,
.section-banner-feature .col-content,
.section-banner-feature .product-feature,
.canvas-quickview .wrap-quick .image,
.tf-compare-list .tf-compare-item,
.product-thumbs-slider .tf-product-media-main,
.product-thumbs-slider .tf-product-media-thumbs .item::after {
  border-radius: var(--ar-radius);
}

/* The photograph is rounded on .product-img rather than on the card wrapper:
   that is the element the template already clips, and the wrapper is where
   the badges and the hover icons live — clipping it would cut them off. */

/* Badges — the sale flag and the stock pill. The dot beside the stock line
   is drawn as an 8px square; it is called a dot, so it gets to be one. */
.product-badge_item,
.product-badge_stock {
  border-radius: var(--ar-radius);
}
.product-badge_stock .br-dot {
  border-radius: 50%;
}

/* Our own additions, brought to the same figure. */
.ar-quick,
.ar-quick_field,
.ar-quick .ar-quick_field input.ar-quick_tel {
  border-radius: var(--ar-radius);
}

/* The line under the price — VAT, shipping, warranty, returns. The template
   sets it in its 18/28 body face, which at that length reads as a second
   paragraph competing with the price above it. 15/21 puts it back where it
   belongs: a note, not a statement (client, 2026-08-24). */
.tf-product-info-wrap .tf-product-info-heading .product-infor-description {
  font-size: 15px;
  line-height: 21px;
}

/* ------------------------------------------------------------------ *
 * Buying buttons — navy at rest, raspberry under the pointer
 *
 * Only the ones that put something in the basket (client, 2026-08-24): the
 * pair on the product page and the bar on every product card, wherever the
 * card appears — catalogue, home page, quick view, the mega-menu. The rest
 * of the page keeps the template's raspberry, so these read as the action
 * rather than as one more button among many.
 * ------------------------------------------------------------------ */
.btn-action-price,
.box-action_add .tf-btn,
.ar-quick_form .tf-btn {
  background: var(--text-primary);
  border-color: var(--text-primary);
}
.btn-action-price:hover,
.box-action_add .tf-btn:hover,
.ar-quick_form .tf-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* The two remaining buttons the client wanted in the brand colour: the one on
   each slide of the header carousel and the telephone in the quick-pick band
   (2026-08-24). Both keep the raspberry for the hover, like the buying
   buttons above. The outlined category pills beside the telephone are not
   touched — they are meant to be quiet. */
.slideshow-v01 .sld-content .tf-btn,
.ar-quick-pick .tf-btn:not(.btn-outline) {
  background: var(--text-primary);
  border-color: var(--text-primary);
}
.slideshow-v01 .sld-content .tf-btn:hover,
.ar-quick-pick .tf-btn:not(.btn-outline):hover {
  background: var(--primary);
  border-color: var(--primary);
}


/* ------------------------------------------------------------------ *
 * The filter column had no bottom (client, 2026-08-24)
 *
 * On a wide screen the column is pinned: the theme's script gives every
 * .sticky-*-top element a top equal to the height of the fixed header, so it
 * stays in view while the grid scrolls past. That is right until the column
 * grows taller than what is left of the screen — with categories, seven
 * series, four bundles, the price slider and availability it does — and then
 * its lower half sits below the fold and the wheel cannot reach it, because
 * the column no longer moves with the page.
 *
 * The template already made .canvas-body a scroll container for the phone's
 * slide-out filter; it only ever lacked a ceiling on the desktop. Given one,
 * the column scrolls inside itself, and because the theme unsets
 * overscroll-behavior above 1200px the wheel carries on down the page once
 * the last filter is reached.
 *
 * The 140px is the fixed header plus the 15px the theme leaves under it plus
 * a little air at the bottom — deliberately generous, so that a shorter
 * header only means the column ends sooner, never that it hides under one.
 * ------------------------------------------------------------------ */
@media (min-width: 1200px) {
  .sidebar-filter .canvas-body {
    max-height: calc(100vh - 140px);
    /* The column still scrolls; the bar is just not drawn (client,
       2026-08-25). The template paints it 2px wide in solid black, which on
       a white sidebar reads as a rule down the middle of the page rather
       than as a scrollbar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sidebar-filter .canvas-body::-webkit-scrollbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ *
 * Three columns on a phone (client, 2026-08-24)
 *
 * The template stops at two below 768px, and its script forces that width
 * back on every resize — so the third column is carried by a class of ours,
 * ar-cols-3, which v4-shop.js keeps on the grid. Everything here is the price
 * of that column: at three across a card is about 90px wide inside its
 * padding, and the template's type was drawn for twice that.
 *
 * The basket icon goes rather than the word: "DO KOSZYKA" on one line is what
 * makes the button a button, and on a 320px screen the icon is exactly what
 * pushes it onto two.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .tf-grid-layout.ar-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
    row-gap: 16px;
  }
  .ar-cols-3 .card-product_info {
    padding: 10px;
    padding-top: 0;
    gap: 6px;
  }
  .ar-cols-3 .product-cate {
    font-size: 10px;
    line-height: 14px;
  }
  /* Tighter and heavier, because at 12px over two lines the name was the
     one thing on the card that did not read (client, 2026-08-24).

     Asking for 700 is now enough. Under Segoe UI Semibold it was not: that
     family holds a single face, so 600 and 700 returned the same weight and
     the name had to borrow Bold from Segoe UI proper. Nunito Sans is a
     variable font and simply gets heavier.

     Both !important marks are answers to the template's own: the name wears
     .lh-24 and .fw-medium, and each of those utilities carries one. */
  .ar-cols-3 .card-product_info .name-product {
    font-size: 12px;
    line-height: 14px !important;
    font-weight: 700 !important;
    /* Three lines' worth, whether the name needs them or not (client,
       2026-08-24): the rating, the price and the button below it then start
       at the same height across the row. */
    min-height: 43px;
  }
  .ar-cols-3 .product-rating .star-wrap {
    font-size: 10px;
  }
  .ar-cols-3 .product-rating .text-caption-01 {
    font-size: 11px;
    line-height: 16px;
  }
  .ar-cols-3 .product-badge_stock {
    font-size: 9px;
    line-height: 13px;
    padding: 1px 5px;
    gap: 3px;
  }
  .ar-cols-3 .product-badge_stock .br-dot {
    width: 5px;
    height: 5px;
  }
  .ar-cols-3 .price-wrap .price-new {
    font-size: 12px;
    line-height: 18px;
  }
  .ar-cols-3 .box-action_add .tf-btn {
    --px: 6px;
    --h: 32px;
    gap: 0;
  }
  .ar-cols-3 .box-action_add .tf-btn .icon {
    display: none;
  }
  .ar-cols-3 .box-action_add .tf-btn .text-caption-01 {
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
  }
  /* The three icons over the photograph shrink with everything else. */
  .ar-cols-3 .product-action_list .box-icon {
    width: 28px;
    height: 28px;
  }
  .ar-cols-3 .product-action_list .box-icon .icon {
    font-size: 14px;
  }
}

/* ==================================================================== *
 * The type scale, retuned (client, 2026-08-29)
 *
 * Measured on a catalogue page before this block: the filter group heading
 * was 20/600, a product's name 16/500, a filter option 16/400 and the price
 * 16/400 in grey. So the furniture in the left column was set larger and
 * heavier than the goods in the middle, an option in that column was the same
 * size as a product's name, and the price — the one number a shopper is
 * looking for — was the quietest text on the card.
 *
 * It became visible the day the shop moved to Nunito Sans, and that is not a
 * coincidence. "Segoe UI Semibold" holds one cut: whether the stylesheet asked
 * for 400, 500 or 600, Windows served very nearly the same face, so weight
 * carried no information and size did all the work. Nunito Sans is a variable
 * font and those three weights are now three different things — which exposed
 * a scale where the sizes had been doing a job the weights should have shared.
 *
 * The order it should read in, loudest first: price, name, filter heading,
 * filter option, the small grey category over the name.
 * ==================================================================== */

/* The left column is navigation. Small and firm reads as a heading without
   competing with what is for sale. */
.widget-facet .facet-title .h6 {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: .01em;
}

/* An option is one line of a list, not a heading. */
.filter-group-check .list-item .ar-facet {
  font-size: 14px;
  line-height: 22px;
}

/* The number in brackets answers "is it worth ticking" and nothing else. */
.filter-group-check .list-item .ar-facet .count {
  color: var(--text-mute);
}

/* The thing being sold. Same size as before — the weight is what changes, and
   with a real variable font a step of one hundred is now a step.

   The mark answers the template's own: the name wears .fw-medium, which
   carries !important, so a plainer rule here loses however specific it is. */
.card-product_info .name-product {
  font-weight: 600 !important;
}

/* The price. It was grey, light and the same size as everything around it;
   it is the number the whole card exists to deliver. */
.card-product_info .price-wrap,
.card-product_info .price-wrap .price-new {
  font-size: 17px;
  font-weight: 700 !important;
  line-height: 26px;
  color: var(--text-primary);
}

/* A price that was struck through would follow the price, not lead it. Left
   at the old size and grey on purpose — there are no specials in the shop
   today, and the day there are, this is what stops the two reading alike. */
.card-product_info .price-wrap .price-old {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* On a phone the gap under a section heading is a fifth of the screen doing
   nothing (client, 2026-08-29). Twenty-eight pixels is a desktop measure. */
@media (max-width: 767px) {
  .sect-heading {
    margin-bottom: 15px;
  }
}

/* ------------------------------------------------------------------ *
 * The foot of the filter drawer (phone only)
 *
 * It held a wide "show results" button until 2026-08-29, and the client had
 * it taken out: the filters here apply the moment they are ticked, so the
 * button never fetched anything — it closed the drawer, which the cross at
 * the top of the drawer already does.
 *
 * What is left is the clearing, which on a phone had nowhere else to be: the
 * row of chips that carries it on a wide screen lives behind the drawer. When
 * nothing is ticked there is nothing to clear, and the whole footer goes
 * rather than standing there empty with a border on it.
 * ------------------------------------------------------------------ */
.ar-filter-foot {
  display: flex;
}

.ar-filter-foot .ar-filter-clear {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--ar-radius);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

.ar-filter-foot .ar-filter-clear:hover {
  border-color: var(--text-primary);
}

.ar-filter-foot.is-empty {
  display: none;
}

/* Air between the options. The template set them flush, and at 14px a column
   of nine series names read as one block of text rather than nine things to
   press (client, 2026-08-29). Not after the last one: that space is the
   group's own, and doubling it pushed the next heading out of rhythm. */
.filter-group-check .list-item:not(:last-child) {
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------ *
 * The two switches in the top bar, held still
 *
 * They moved every time they were used (client, 2026-08-29), and for two
 * reasons at once.
 *
 * The width followed the word. Measured in the shop's own type at 16px:
 * "Polski" is 43px, "English" 54 and "Українська" 83 — so choosing Ukrainian
 * pushed the currency beside it forty pixels to the right, and choosing Polish
 * pulled it back. Both cells are now as wide as their longest word however
 * short the current one is: 83 + the flag, the gap and the caret for the
 * language, 36 + the caret for the money.
 *
 * And there was a moment of nothing. The theme dresses these with its own
 * dropdown plugin after the page has been parsed, so for as long as that takes
 * the browser drew a bare grey <select> and then replaced it. Undressed, it is
 * hidden — the space is already reserved above, so what the eye sees is the
 * control arriving into a gap that never moved, rather than one shape becoming
 * another.
 *
 * The child combinator is what makes the hiding safe: the plugin wraps the
 * select in a div of its own, so the moment it has run the select is no longer
 * a child of this cell and the rule stops applying to it.
 * ------------------------------------------------------------------ */
.tf-topbar .tf-languages {
  min-width: 136px;
}

.tf-topbar .tf-currencies {
  min-width: 64px;
}

.tf-topbar .tf-languages > select.tf-dropdown-select,
.tf-topbar .tf-currencies > select.tf-dropdown-select {
  visibility: hidden;
}

/* ------------------------------------------------------------------ *
 * One-click order: the country, the number, and the button beside them
 *
 * Two things were wrong at once (client, 2026-08-29).
 *
 * On iOS the button and the field were not the same height. Both had a height
 * of their own — 50px on the button through the theme's --h, 46px on the input
 * plus its two borders — and two numbers that have to agree eventually stop
 * agreeing. Neither states a height now: the row stretches, and both sides
 * take the height of the row, so they cannot differ whatever the platform
 * does with the input.
 *
 * And the code beside the field was "+48" printed into the markup. It is a
 * picker now, over the fifty-five countries the shop delivers to, with the
 * search box every long list in this shop has.
 * ------------------------------------------------------------------ */
.ar-quick_form {
  align-items: stretch;
}

.ar-quick_field {
  min-height: 50px;
  padding-left: 0;
}

.ar-quick .ar-quick_field input.ar-quick_tel {
  height: auto;
  min-height: 0;
  align-self: stretch;
  padding-left: 10px;
}

.ar-quick_form .tf-btn {
  --h: auto;
  height: auto;
  min-height: 50px;
}

/* ---- the country ---- */

.ar-quick_dial {
  position: relative;
  flex: none;
  display: flex;
  align-self: stretch;
}

/* The value, and only the value: what a form would post and what a screen
   reader reads. Hidden from the first paint rather than after the script has
   run, so no native dropdown is ever drawn — the panel needs scripting to
   send anything at all, so nothing is lost when there is none. */
.ar-quick_dial select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ar-quick_dial_btn {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  padding: 0 10px 0 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.ar-quick_dial_btn:hover {
  color: var(--primary);
}

.ar-quick_dial_flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex: none;
}

.ar-quick_dial_flag[hidden] {
  display: none;
}

/* Drawn rather than borrowed from the icon font: this control is built by
   script and a glyph that has not loaded yet is a box. */
.ar-quick_dial_caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.ar-quick_dial.is-open .ar-quick_dial_caret {
  transform: translateY(1px) rotate(-135deg);
}

.ar-quick_dial_menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  max-width: calc(100vw - 40px);
  display: none;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--ar-radius);
  background: var(--white);
  box-shadow: 0 14px 40px rgba(19, 41, 89, .16);
}

.ar-quick_dial.is-open .ar-quick_dial_menu {
  display: flex;
}

/* Sixteen pixels, because anything smaller makes iOS zoom the page the moment
   the box is tapped — the same reason every other search box in this shop is
   set at sixteen. */
.ar-quick_dial_find {
  width: 100%;
  height: 38px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--ar-radius);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--white);
}

.ar-quick_dial_find:focus {
  outline: none;
  border-color: var(--text-primary);
}

.ar-quick_dial_list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ar-quick_dial_item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ar-radius);
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.ar-quick_dial_item[hidden] {
  display: none;
}

.ar-quick_dial_item:hover {
  background: var(--surface, rgba(19, 41, 89, .06));
}

.ar-quick_dial_item.is-on {
  background: rgba(19, 41, 89, .08);
  font-weight: 600;
}

.ar-quick_dial_item img,
.ar-quick_dial_noflag {
  width: 20px;
  height: 15px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
}

/* A country the theme has no flag for keeps the column straight. */
.ar-quick_dial_noflag {
  border: 1px solid var(--line);
}

.ar-quick_dial_name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-quick_dial_plus {
  flex: none;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.ar-quick_dial_none {
  margin: 8px 10px 4px;
  color: var(--text-secondary);
  font-size: 14px;
}

.ar-quick_dial_none[hidden] {
  display: none;
}

/* On a phone the field and the button each take the whole width, so the menu
   is measured against the panel rather than against the little button. */
@media (max-width: 575px) {
  .ar-quick_dial_menu {
    width: calc(100vw - 56px);
  }
}

/* The bar's own furniture. The old skin styled it; the new one never had to,
   because the bar was hidden here — so when it came back on a handle it
   arrived as five unstyled blocks with the labels wrapping onto two lines
   (client, 2026-08-29). These are the old skin's rules, in this design's
   colours and tokens. */
@media (max-width: 991px) {
  .tf-toolbar-bottom {
    align-items: stretch;
    padding: 8px 0;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(19, 41, 89, .08);
  }

  .tf-toolbar-bottom .toolbar-item {
    flex: 1 1 20%;
    min-width: 0;
    position: relative;
  }

  .tf-toolbar-bottom .toolbar-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 0 4px;
    text-decoration: none;
  }

  .tf-toolbar-bottom .toolbar-icon {
    position: relative;
    line-height: 1;
  }

  .tf-toolbar-bottom .toolbar-icon i {
    font-size: 21px;
    color: var(--text-primary);
  }

  /* The label has one line and takes what it can of it: "Porównaj" and
     "Kategorie" are wide words on a 390px screen, and a second line pushes
     its neighbours' icons out of alignment across the row. */
  .tf-toolbar-bottom .toolbar-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    color: var(--text-secondary);
  }

  .tf-toolbar-bottom .toolbar-count {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
  }

  /* The tick on the account icon when somebody is signed in, the same mark
     the header's person wears. */
  .tf-toolbar-bottom .eu-signed-in {
    position: absolute;
    right: -6px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16a34a;
    color: var(--white);
  }

  .tf-toolbar-bottom .eu-signed-in svg {
    width: 9px;
    height: 9px;
  }
}

/* The "order" button, narrower (client, 2026-08-29). The template gives every
   button forty pixels of air either side, which on a phone left the telephone
   field too narrow to see a whole number in — and this row is one field and
   one button, so every pixel the button does not need belongs to the field.
   The field can also shrink now: it asked for 220px before it would give way,
   which on a 390px screen is most of the row. */
.ar-quick_form .tf-btn {
  padding: 0 18px;
  font-size: 14px;
}

.ar-quick_field {
  flex: 1 1 200px;
  min-width: 0;
}

.ar-quick .ar-quick_field input.ar-quick_tel {
  min-width: 0;
}

/* The product page on a phone: the name a step larger and heavier, the price
   heavier at the size it already had (client, 2026-08-29). Measured before:
   both were 22/600, so the thing being sold and its price carried exactly the
   same weight as each other and as nothing else on the screen.

   Phone only. On a wide screen the column is a third of the page and 22/600
   is the approved drawing; it is on 390 pixels, where the name is the first
   thing under the photograph, that it needs to lead. */
@media (max-width: 991px) {
  .tf-product-info-heading .product-infor-name {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
  }

  .product-infor-price .price-on-sale,
  .product-infor-price .price-new {
    font-weight: 700;
  }
}

/* The one-click row on a phone (client, 2026-08-29).
 *
 * Three things share it: the country, the number and the button. The number
 * is the one a person is looking at while they type, and it was getting the
 * least of the row — a fourteen-digit German number ran out of sight behind
 * the button's edge.
 *
 * Two steps rather than one, because the problem is not the same at both
 * sizes. On a tablet the button only has to stop being generous: the padding
 * comes down and the field takes what it gives up. On a phone there is not
 * enough row for three things at all, so the button takes a line of its own
 * and the number gets the whole of the first one.
 */
@media (max-width: 991px) {
  .ar-quick_form .tf-btn {
    padding: 0 14px;
  }
}

@media (max-width: 575px) {
  .ar-quick_field,
  .ar-quick_form .tf-btn {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Full width and centred, so it reads as the row's action rather than as
     something left over at the end of it. */
  .ar-quick_form .tf-btn {
    justify-content: center;
  }
}

/* The support block: the telephone, and the button that opens a letter.
 *
 * They sit in one row while there is room for both. On a phone there is not,
 * so the button drops to a line of its own — and it dropped there at its own
 * natural width, leaving a third of the line empty beside it and the block
 * looking as though something had failed to load (client, 2026-08-29).
 *
 * No breakpoint for it. The button is given a basis of 200px and permission
 * to grow, so it wraps exactly when it stops fitting and then fills whatever
 * line it lands on — beside the telephone on a wide screen, the whole width
 * on a narrow one. Its contents are centred either way, because a label
 * pinned to the left of a wide button reads as the same accident again.
 */
.tf-product-support-box .btn-action_chat {
  flex: 1 1 200px;
  justify-content: center;
}

/* And the telephone half gives way first: it is text, it can wrap, and the
   button cannot get narrower than its own words. */
.tf-product-support-box .support-infor {
  flex: 1 1 auto;
  min-width: 0;
}

/* The rule between the language and the money at the foot of the slide-out
   menu. It was Bootstrap's .border-end on the left half, so its length was
   that half's height — and on Safari the half came out shorter than the row,
   leaving the rule stopping a dozen pixels above the bottom (client,
   2026-08-29, on iOS).

   Drawn on the row instead, pinned to both its edges: a line that is told
   where its top and its bottom are cannot come up short, whatever either half
   decides its own height is. The two halves are exactly half the row each —
   measured, 160 and 160 of 320 — so the middle is the middle. */
.canvas-mb .canvas-footer {
  position: relative;
}

.canvas-mb .canvas-footer > .border-end {
  border-right: 0;
}

.canvas-mb .canvas-footer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Five cards across (client, 2026-08-29)
 *
 * The wish list, the search results, Promocje and a brand's page all show
 * five across from 1200px up. That leaves 202px inside a card for the row
 * that carries the stars on the left and the stock pill on the right, and
 * the theme's own metrics were drawn for a wider card: with a review count
 * beside the stars the row needs 206px and wraps, so one card in a row of
 * five is 26px taller than its neighbours for no reason a reader can see.
 *
 * Eight pixels is the whole difference, taken off the gap between the two
 * and the pill's own sides. Scoped to the five-across grids rather than to
 * a screen width, because what is short of room is the card, not the page.
 * ------------------------------------------------------------------ */
@media (min-width: 1200px) {
  .tf-grid-layout.xl-col-5 .product-rating {
    column-gap: 6px;
    flex-wrap: nowrap;
  }

  .tf-grid-layout.xl-col-5 .product-rating .rating-wrap {
    flex: 0 0 auto;
  }

  .tf-grid-layout.xl-col-5 .product-badge_stock {
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ *
 * The magnifier in the search box (client, 2026-08-29)
 *
 * The template turns it crimson on hover — the shop's promotional accent,
 * the colour of a sale ribbon and of the SZUKAJ button on the results page.
 * Inside a white field it read as an alarm rather than as a button.
 *
 * Navy instead: the colour every other button in this shop wears, so the
 * square says "press me" in the shop's own voice. The results-page SZUKAJ
 * button keeps its crimson — that one is the page's main action and is meant
 * to be loud.
 * ------------------------------------------------------------------ */
.form-search-nav .btn-action_submit:hover,
.form-search-nav .btn-action_submit:focus-visible {
  background: var(--text-primary);
  color: var(--white);
}

/* ------------------------------------------------------------------ *
 * The lorry on the free-delivery bar (client, 2026-08-29)
 *
 * The template hangs the marker off the end of the filled part —
 * `left: 100%` inside .value — so all twenty pixels of it sit past the fill
 * rather than on it. At the start of the bar that reads fine, because the
 * marker grows into the empty track. At the end there is no track left to
 * grow into: the marker clears the bar entirely and lands on the grey
 * block's sixteen pixels of padding, four pixels wider than the padding is.
 * So the left end had air and the right end was jammed against the edge.
 *
 * Centred on the end of the fill instead, and the track inset by half a
 * marker at each end. Then the marker's two extremes stop exactly where the
 * strip's own padding does — the same sixteen pixels as the line of text
 * above it, at both ends, whatever the basket is worth.
 * ------------------------------------------------------------------ */
.notification-progress .progress-cart {
  width: auto;
  margin-left: 10px;
  margin-right: 10px;
}

.notification-progress .round {
  transform: translate(-50%, -50%);
}