.page_form_create_custom_order{width:95%;max-width:500px;margin:auto}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-form{max-width:500px;margin:30px auto;padding:20px;border:1px solid #ddd;border-radius:10px;background-color:#f9f9f9;font-family:Arial,sans-serif}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-form label{display:block;margin-bottom:15px;font-weight:bold}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-form input,.page_form_create_custom_order .custom-order-form-wrapper #custom-order-form select{width:100%;padding:10px;margin-top:5px;border-radius:6px;border:1px solid #ccc;font-size:14px;box-sizing:border-box}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-form button{margin-top:10px;width:100%;padding:12px;background-color:#0073aa;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background-color .3s}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-form button:hover{background-color:#005a8c}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-message{margin-top:15px;padding:10px;border-radius:4px;font-weight:bold}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-message.success{background-color:#e6ffe6;color:#2e7d32;border:1px solid #2e7d32}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-message.error{background-color:#ffe6e6;color:#c62828;border:1px solid #c62828}.page_form_create_custom_order .custom-order-form-wrapper #custom-order-loader{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:15px;font-weight:bold;color:#333}.page_form_create_custom_order .custom-order-form-wrapper .loader{width:20px;height:20px;border:3px solid #ccc;border-top:3px solid #000;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

@charset "UTF-8";
/* Language switcher — desktop (sits in the header top bar, after .phone). 
   Mirrors the .phone block exactly so the switcher reads as a sibling of the phone:
   same float, vertical position (margin-top 26px), right gap (80 / 1565 = $inner_width1),
   separator spec/offset and inherited typography (base 18px / 400 Rubik, color #6d6d6d). */
.header .lang-switcher {
  position: relative;
  float: left;
  margin: 26px 5.1118% 0 0;
  white-space: nowrap;
}


.header .lang-switcher:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -35px;
  margin-top: -14px;
  width: 1px;
  height: 28px;
  background-color: #d0d0d0;
}

/* Centre the switcher between its two separators. phone:before already sits 35px to the
   right of .phone, but .phone's default 5.11% (80 / 1565) right margin leaves it 45px from
   the switcher — so the switcher looks off-centre. Override .phone to .delivery's 4.47%
   (70 / 1565) right margin so the gap is 70px and phone:before lands 35px from BOTH sides.
   Selector is .header .top .phone (0,3,0) to beat theme.css's .header .phone (0,2,0), since
   this module's CSS loads before theme.css. Scoped to >1100px because the theme makes .phone
   fluid (1.8%) and hides the separators at <=1100, where centring no longer applies. */
@media all and (min-width: 1101px) {
  .header .top .phone {
    margin-right: 4.4728%;
  }
}
/* display: flex (block-level), NOT inline-flex — an inline-level link adds ~3px of
   line-box descender space below it, making .lang-switcher taller than .phone and
   dropping its separator ~1.5px below the phone's. Block flex removes that gap. */
.header .lang-switcher-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6d6d6d;
  transition: color 0.3s ease-in-out;
}

.header .lang-switcher-link:hover {
  color: #d2536a;
}

.header .lang-switcher-link:focus-visible {
  outline: 2px solid #d2536a;
  outline-offset: 2px;
}

/* Thin border so the white edge of each flag (RU top stripe / IL field) stays visible
   on the white header background. */
.header .lang-switcher-flag {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #e6e6e6;
}


@media all and (min-width: 769px) and (max-width: 1635px) {
  .header .lang-switcher:before {
    right: -2vw;
  }
}

@media all and (max-width: 1100px) {
  .header .lang-switcher {
    margin: 24px 1.8% 0 0;
    font-size: 1.8vw;
    line-height: 22px;
  }
  .header .lang-switcher:before {
    display: none;
  }
}
/* Search toggle icon — hidden by default; only shown 769–1440px (below it the mobile
   header takes over, above it the inline search form fits at its full width). */
.header .top .search-bt {
  display: none;
}

/* 769–1440px: instead of cramming the inline search into the row next to the switcher,
   replace it with a magnifier icon (like the mobile .search-bt). Clicking it toggles
   .search-open on .header (js/main.js), which drops the form down as a centred bar below
   the top row. The inline form is only shown above 1440px, where it fits comfortably. */
@media all and (min-width: 769px) and (max-width: 1440px) {
  .header .top .header-search {
    display: none;
  }
  .header .top .search-bt {
    display: block;
    float: right;
    width: 44px;
    height: 44px;
    margin: 14px 0 0;
    text-align: center;
  }
  .header .top .search-bt:before {
    font-family: "icomoon";
    content: "\e90c"; 
    font-size: 21px;
    line-height: 44px;
    color: #4c4c4c;
    transition: color 0.3s ease-in-out;
  }
  .header .top .search-bt:hover:before {
    color: #d2536a;
  }
  .header .top .search-bt:focus-visible {
    outline: 2px solid #d2536a;
    outline-offset: 2px;
  }
  /* Revealed search bar. The form's containing block is the positioned .header (not the
     static .top), so position:absolute escapes .top's overflow:hidden. margin auto cancels
     the form's default margin-top:20px and centres the bar within the 3.5% side span (left +
     right both set). Width is fluid (scales with the viewport) and capped at 560px so it
     isn't oversized at 769px nor too wide on the upper end. It sits flush below the 72px bar. */
  .header.search-open .top .header-search {
    display: block;
    position: absolute;
    top: 72px;
    left: 3.5%;
    right: 3.5%;
    width: clamp(360px, 55vw, 560px);
    margin: 0 auto;
    z-index: 5;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  }
  .header.search-open .top .header-search input[type=text] {
    width: calc(100% - 55px); 
  }
}
/* Mobile top nav bar layout: the search toggle is hidden, the language switcher sits on the
   LEFT (after the logo + .header-badge), and the cart + menu icons stay on the right. */
@media all and (max-width: 768px) {
  
  .mobile-menu .top .search-bt {
    display: none;
  }
  /* Language switcher on the LEFT, just after the logo + .header-badge. .header-badge is
     absolutely positioned (left 82px + 3.3vw, 56px wide), so a plain left float would slide
     under it — the 76px left margin clears the badge (~10px gap) across the mobile range.
     Fills the full 49px bar height and centres the flag/code vertically. */
  .mobile-menu .top .lang-switcher {
    float: left;
    height: 49px; 
    margin: 0 0 0 76px; 
    display: flex;
    align-items: center;
  }
  .mobile-menu .top .lang-switcher-link {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0;
    color: #4c4c4c; 
    font-size: 16px;
    font-weight: 400;
    transition: color 0.3s ease-in-out;
  }
  .mobile-menu .top .lang-switcher-link:hover {
    color: #d2536a;
  }
  .mobile-menu .top .lang-switcher-link:focus-visible {
    outline: 2px solid #d2536a;
    outline-offset: 2px;
  }
  .mobile-menu .top .lang-switcher-flag {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
  }
}
/* On very narrow screens (~320px) the badge + switcher + cart + menu barely fit on one line,
   and the 76px left margin pushes the switcher's right edge into the cart, dropping it onto a
   second line. Tighten the left margin so the switcher (with its RU/HE text) still fits — it
   then sits centred in the ~69px slot between the badge and the cart (~7px gaps either side). */
@media all and (max-width: 360px) {
  .mobile-menu .top .lang-switcher {
    margin-left: 72px;
  }
}