/* Sweet SFX Header 1.0.9 (24 Oct 2026): the agreed look "A" (demo/header-search-mock.html).
   The Elementor header (template 16117): one row (container 73b02458) of the logo, the search widget and the menu.
   These rules outrank the template's own (body + one more class than Elementor's .elementor-16117 .elementor-element
   .elementor-element-…), so the widths and paddings set in Elementor for these pieces no longer apply; the menu's own
   text, colours and spacing (18px Varela Round, matching Sounding Sweet) are left alone.
   - Laptops and up (wider than 1366px, while the menu shows in full): the search straight after the logo, growing and
     shrinking with the room up to the menu (at most 640px).
   - 1366px and below (where the menu becomes the burger, Elementor's "tablet extra"): the search centred on the
     screen, up to 560px wide.
   - Phones (767px and below): the logo, a search button, the basket (1.0.3) and the burger on one row; the button slides the header
     down to show the search full width below (1.0.1, owner).
   - Every size: the pages' 88% (6% each side). */

body .elementor-location-header > .elementor-element.e-con { --padding-left: 6%; --padding-right: 6%; --column-gap: clamp(22px, 2.4vw, 40px); --gap: 10px clamp(22px, 2.4vw, 40px); column-gap: clamp(22px, 2.4vw, 40px); }
body .elementor-location-header .elementor-element.elementor-widget-theme-site-logo { flex: none; width: auto; max-width: none; }
body .elementor-location-header .elementor-element.elementor-widget-theme-site-logo img { width: auto; max-width: none; height: 56px; } /* the same size at every screen (owner): Elementor makes it 44px on tablets and 35px on phones */
body .elementor-location-header .elementor-element.elementor-widget-search { flex: 0 1 640px; width: auto; max-width: 640px; min-width: 200px; }
body .elementor-location-header .elementor-element.elementor-widget-nav-menu { flex: 1 0 auto; min-width: max-content; } /* the menu never squeezes onto two lines: the search gives way */

/* The search: on black, a magnifier, the red Search button inside, a red outline while typing */
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-form { position: relative; display: block; margin: 0; }
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-input-wrapper { position: relative; width: 100%; }
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-input {
  box-sizing: border-box; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0 104px 0 44px;
  border: 2px solid #4a4a50; border-radius: 22px; box-shadow: none; outline: 0;
  background: #0e0e10 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%239a9aa2' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%239a9aa2' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 16px 50% / 18px 18px;
  color: #fff; font-family: Poppins, sans-serif; font-size: 14px; font-weight: 300; line-height: 40px;
  transition: border-color .25s, background-color .25s;
  --e-search-placeholder-color: #9a9aa2; --e-search-input-color: #fff;
}
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-input::placeholder { color: #9a9aa2; opacity: 1; }
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-input:hover { border-color: #77777e; }
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-input:focus { border-color: #e50914; background-color: #000; outline: 0; }
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Elementor's Search button is there but hidden (for screen readers only): shown, as the red pill inside */
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-submit.elementor-screen-only {
  position: absolute; z-index: 2; top: 5px; right: 5px; left: auto; bottom: auto; width: auto; height: 34px; margin: 0; padding: 0 18px;
  overflow: visible; clip: auto; clip-path: none; border: 0; border-radius: 17px; box-shadow: none;
  display: inline-flex; align-items: center; background: #e50914; color: #fff; cursor: pointer;
  font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; text-transform: none;
  transition: background-color .2s;
}
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-submit.elementor-screen-only::after { content: "Search"; }
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-submit.elementor-screen-only:hover,
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-submit.elementor-screen-only:focus { background: #c80711; color: #fff; } /* the theme turns buttons pink on hover otherwise */
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-submit.elementor-screen-only:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-submit svg,
body .elementor-location-header .elementor-element.elementor-widget-search .e-search-submit i { display: none; }

/* 1366px and below (the burger): the search centred on the screen. Both sides are at least the logo's width, so it
   sits exactly in the middle. */
@media (max-width: 1366px) {
  body .elementor-location-header > .elementor-element.e-con { display: grid; grid-template-columns: minmax(92px, 1fr) minmax(0, 560px) minmax(92px, 1fr); align-items: center; }
  body .elementor-location-header .elementor-element.elementor-widget-theme-site-logo { justify-self: start; }
  body .elementor-location-header .elementor-element.elementor-widget-search { width: 100%; max-width: none; min-width: 0; }
  body .elementor-location-header .elementor-element.elementor-widget-nav-menu { justify-self: end; width: auto; }
}
/* Tablets: Elementor's own 5% sides give way to the 88% (the --padding above), the row as tall as on laptops */
@media (max-width: 1024px) {
  body .elementor-location-header > .elementor-element.e-con { --padding-top: 0.5%; --padding-bottom: 0.5%; }
}
/* Phones: everything on one row (the logo, a round search button, the burger); the search button slides the header
   down to show the search full width below (header.js), and turns into a cross to close it */
body .elementor-location-header .ssfx-find, body .elementor-location-header .ssfx-cart { display: none; }
@media (max-width: 767px) {
  body .elementor-location-header > .elementor-element.e-con { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "logo find menu" "search search search"; column-gap: 14px; row-gap: 0; --padding-top: 10px; --padding-bottom: 12px; }
  body .elementor-location-header .elementor-element.elementor-widget-theme-site-logo { grid-area: logo; }
  body .elementor-location-header .elementor-element.elementor-widget-nav-menu { grid-area: menu; }
  body .elementor-location-header .elementor-element.elementor-widget-search { grid-area: search; }
  body .elementor-location-header .elementor-element.elementor-widget-search .e-search-input { font-size: 16px; } /* under 16px, iPhones zoom the page in when it's tapped */
  /* The search row, closed until the button opens it (without the script, it stays open). Open: exactly its height
     (10px + the 44px field), so every moment of the slide moves. Closing (1.0.4): eased in and out, not the
     fast-start curve of the opening, which made the header jump up at the start ("pops", owner). */
  body .elementor-location-header.ssfx-has-find .elementor-element.elementor-widget-search { max-height: 0; padding-top: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height .32s cubic-bezier(.45,0,.25,1), padding-top .32s cubic-bezier(.45,0,.25,1), opacity .22s ease, visibility 0s linear .32s; }
  body .elementor-location-header.ssfx-has-find.ssfx-search-open .elementor-element.elementor-widget-search { max-height: 54px; padding-top: 10px; opacity: 1; visibility: visible; transition: max-height .3s cubic-bezier(.2,.8,.2,1), padding-top .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease .05s, visibility 0s; }
  body .elementor-location-header:not(.ssfx-has-find) > .elementor-element.e-con { row-gap: 10px; }
  /* The search button: a 40px ring with a magnifier, as the search field's edge; red with a cross while open */
  body .elementor-location-header .ssfx-find { grid-area: find; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 2px solid #4a4a50; border-radius: 50%; background: #0e0e10; color: #fff; cursor: pointer; box-shadow: none; transition: border-color .2s, background-color .2s; -webkit-tap-highlight-color: transparent; }
  body .elementor-location-header .ssfx-find:hover, body .elementor-location-header .ssfx-find:focus { border-color: #77777e; background: #0e0e10; color: #fff; } /* the theme turns buttons pink otherwise */
  body .elementor-location-header .ssfx-find:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  body .elementor-location-header .ssfx-find svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: transform .25s ease, opacity .2s ease; }
  body .elementor-location-header .ssfx-find .ssfx-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
  body .elementor-location-header.ssfx-search-open .ssfx-find, body .elementor-location-header.ssfx-search-open .ssfx-find:hover, body .elementor-location-header.ssfx-search-open .ssfx-find:focus { border-color: #e50914; background: #e50914; }
  body .elementor-location-header.ssfx-search-open .ssfx-find .ssfx-mag { opacity: 0; transform: rotate(90deg) scale(.6); }
  body .elementor-location-header.ssfx-search-open .ssfx-find .ssfx-x { opacity: 1; transform: none; }
  /* (1.0.3) The basket on the top row, between the search button and the burger: its icon and red count, as in the menu */
  body .elementor-location-header.ssfx-has-cart > .elementor-element.e-con { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "logo find cart menu" "search search search search"; }
  body .elementor-location-header .ssfx-cart { grid-area: cart; display: grid; place-items: center; width: 40px; height: 40px; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  body .elementor-location-header .ssfx-cart:hover, body .elementor-location-header .ssfx-cart:focus { color: #e50914; }
  body .elementor-location-header .ssfx-cart:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
  body .elementor-location-header .ssfx-cart .ssfx-basket__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  /* The burger's drop-down opens below the whole header: from the button's foot (10px padding + (56px logo row −
     33px button) / 2 + 33px ≈ 54px) to the header's foot (10 + 56 + 12px + 1px line = 79px; 54px more with the
     search open) */
  body .elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown { margin-top: 24.5px !important; } /* 1.0.4: exactly at the header's foot (25px left a 1px gap, owner) */
  body .elementor-location-header.ssfx-search-open .elementor-element.elementor-widget-nav-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown,
  body .elementor-location-header:not(.ssfx-has-find) .elementor-element.elementor-widget-nav-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown { margin-top: 78.5px !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body .elementor-location-header.ssfx-has-find .elementor-element.elementor-widget-search, body .elementor-location-header .ssfx-find svg { transition: none !important; }
}

/* (1.0.2) The menu's Basket: a basket icon with a red count (hidden while empty); it pops when the count goes up
   (header.js). In the full menu the word is kept for screen readers only; in the drop-down menu it shows beside the
   icon. */
body .elementor-location-header .ssfx-basket { position: relative; display: inline-block; width: 26px; height: 26px; flex: none; vertical-align: middle; }
body .elementor-location-header .ssfx-basket__icon { display: block; width: 100%; height: 100%; }
body .elementor-location-header .ssfx-basket__count {
  position: absolute; top: -7px; right: -10px; box-sizing: border-box; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: #e50914; color: #fff; box-shadow: 0 0 0 2px #000; /* a black ring, so it stands off the icon */
  font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; font-style: normal; line-height: 19px; text-align: center; letter-spacing: 0;
}
body .elementor-location-header .ssfx-basket__count[data-count="0"] { display: none; }
body .elementor-location-header .ssfx-basket__count.is-bump { animation: ssfx-basket-bump .6s cubic-bezier(.2,.8,.2,1); }
@keyframes ssfx-basket-bump { 0% { transform: scale(.4); } 45% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
body .elementor-location-header .elementor-nav-menu--main .ssfx-basket__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body .elementor-location-header .elementor-nav-menu--dropdown a:has(.ssfx-basket) { display: flex; align-items: center; justify-content: center; gap: 12px; }
body .elementor-location-header .elementor-nav-menu--dropdown .ssfx-basket { order: -1; }
@media (prefers-reduced-motion: reduce) { body .elementor-location-header .ssfx-basket__count.is-bump { animation: none; } }

/* (1.0.5) The burger's drop-down slides down from under the header's foot (and back up when closed), its words at full
   size, instead of Elementor's stretch from flat (scaleY). It moves up by its own height and is clipped by the same
   amount at its top, together, so it seems to come out from behind the header's edge. */
body .elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
  max-height: 100vh; transform: translateY(-100%); clip-path: inset(100% 0 0 0); visibility: hidden;
  transition: transform .26s cubic-bezier(.4,0,1,1), clip-path .26s cubic-bezier(.4,0,1,1), visibility 0s linear .26s;
}
body .elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
  transform: translateY(0); clip-path: inset(0 0 0 0); visibility: visible;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), clip-path .42s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  body .elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-menu-toggle + .elementor-nav-menu__container { transition: none !important; }
}

/* (1.0.5, owner: "slide on desktop as well") The full menu's sub-menus (Shop → Cars, Motorbikes…) unroll down from
   under their item as they open; the ones further in (Cars → Manufacturer…), which open to the side, unroll to the
   right. They open with display: block (Elementor's SmartMenus), which starts the animations each time; closing is
   instant, as before.
   (1.0.6) The panels themselves no longer move (1.0.5 moved them, and between whole pixels a hairline of the page
   showed beside the fly-out until it settled, owner): each panel is revealed where it sits (clip-path only) and just
   its words glide in. */
/* (1.0.7) Still a hairline on the fly-outs further in (owner: "the sub, sub menu"): while revealed, a panel is drawn
   on its own, and an edge between whole pixels left a faint seam. Each panel now has a 2px black strip on the side it
   joins (above for the first level, left for the fly-outs), inside the reveal, covering any seam with the menus' black. */
/* (1.0.8) Each level lighter than the one before (owner, "a little bit lighter on each"): Shop's list #141416,
   the next #222226, the next #303035; each joining strip takes the colour of the panel it joins, so the joins stay
   clean. (The rows' hover stays Elementor's black, so it reads as a darker band on every level.) The first level
   opens at the header's foot, under its line (header.js), so it has no strip on top (it would cut the line).
   (1.0.9) The first level is the header's own black and covers the header's grey line where it hangs (header.js),
   so header and Shop list read as one black piece (owner); the fly-outs keep their steps (#222226, #303035, …).
   Moving from one item to the next, the new fly-out shows at once (.ssfx-instant, header.js): unrolling it again
   left the white page showing for a moment where the last one had been ("a little white flash", owner). */
body .elementor-location-header .elementor-nav-menu--main ul.sub-menu.ssfx-instant, body .elementor-location-header .elementor-nav-menu--main ul.sub-menu.ssfx-instant > li { animation: none !important; }
body .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu { background-color: #000; animation: ssfx-sub-down .34s cubic-bezier(.2,.8,.2,1); }
body .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu > li { animation: ssfx-words-down .34s cubic-bezier(.2,.8,.2,1); }
body .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu { background-color: #222226; box-shadow: -2px 0 0 #000; animation: ssfx-sub-side .3s cubic-bezier(.2,.8,.2,1); }
body .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu ul.sub-menu { background-color: #303035; box-shadow: -2px 0 0 #222226; }
body .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu { background-color: #3d3d43; box-shadow: -2px 0 0 #303035; }
/* (1.0.8) A long list (Cars → Manufacturer, 30 makes, 1400px) was taller than the screen, so the menu script pushed
   it up over the header (owner: "clipping header"). The third level and in (lists with nothing further inside them)
   are now at most the screen below the header and scroll inside themselves, so they always open below it; header.js
   then opens every fly-out level with the top of the menu, so all the lines carry straight across. */
body .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu ul.sub-menu { max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #55555c transparent; }
body .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu > li { animation: ssfx-words-side .3s cubic-bezier(.2,.8,.2,1); }
@keyframes ssfx-sub-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ssfx-sub-side { from { clip-path: inset(0 100% 0 -2px); } to { clip-path: inset(0 0 0 -2px); } }
@keyframes ssfx-words-down { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ssfx-words-side { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body .elementor-location-header .elementor-nav-menu--main ul.sub-menu, body .elementor-location-header .elementor-nav-menu--main ul.sub-menu > li { animation: none !important; }
}