/*
==========================================================
Global bar + brand bar  (multi-brand setup)
Loaded after style.css (see inc/global-bar.php), so these
rules win over the theme's on equal specificity.

1. Global bar
2. Brand bar (newsletter sign-up)
3. RTL
==========================================================
*/

/* Visually hidden, still available to screen readers. */
.ocin-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
1. Global bar
---------------------------------------------------------*/
.ocin-global-bar {
  position: relative;
  /* Above #header (z-index: 1) so the cart dropdown overlaps the brand bar. */
  z-index: 1000;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
}
/* No brand bar underneath: give the content its own breathing room. */
.ocin-global-bar--standalone {
  margin-bottom: 40px;
}
/* Flex lives on this inner div (not on .container) so Bootstrap's
   .container:before/:after clearfix pseudo-elements don't become flex items. */
.ocin-global-bar__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 64px;
  padding: 10px 0;
}

/* Logo + Discover */
.ocin-global-bar__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 24px;
}
.ocin-global-bar .ocin-global-bar__site-title {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  text-transform: none;
}
.ocin-global-bar__logo {
  display: inline-block;
  line-height: 1;
  color: #222;
  text-decoration: none;
}
.ocin-global-bar__logo:hover,
.ocin-global-bar__logo:focus {
  color: #000;
  text-decoration: none;
}
.ocin-global-bar__logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 36px;
}
.ocin-global-bar__logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ocin-global-bar__discover {
  margin-left: 22px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #555;
  text-decoration: none;
}
.ocin-global-bar__discover:hover,
.ocin-global-bar__discover:focus {
  color: #000;
  text-decoration: none;
}

/* Search (takes all the free space between the logo and login/cart) */
.ocin-global-bar__search {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 240px;
  flex: 1 1 240px;
  min-width: 0;
  margin-right: 24px;
}
.ocin-global-search {
  position: relative;
  margin: 0;
}
/* The theme has a global `input { width:100%; height:36px; border:2px solid #ccc;
   margin-bottom:.71em }`; the extra class here overrides all of that. */
.ocin-global-bar .ocin-global-search__input {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 14px 0 42px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #222;
  background-color: #fff;
  border: 1px solid #222;
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.ocin-global-bar .ocin-global-search__input::-webkit-input-placeholder {
  color: #777;
  opacity: 1;
}
.ocin-global-bar .ocin-global-search__input::-moz-placeholder {
  color: #777;
  opacity: 1;
}
.ocin-global-bar .ocin-global-search__input:-ms-input-placeholder {
  color: #777;
}
.ocin-global-bar .ocin-global-search__input::placeholder {
  color: #777;
  opacity: 1;
}
.ocin-global-bar .ocin-global-search__input:focus {
  border-color: #000;
  outline: 0;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.ocin-global-search__icon {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: #222;
  pointer-events: none;
}
.ocin-global-search__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Login + cart (the theme's own .login_btn_wrap / .ql_cart_wrap, relocated) */
.ocin-global-bar__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: auto;
}
/* .ql_cart_wrap has overflow:hidden (until hovered), which would otherwise let
   flexbox shrink it to nothing when the row is tight. */
.ocin-global-bar__actions > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.ocin-global-bar .login_btn_wrap,
.ocin-global-bar .ql_cart_wrap {
  float: none;
}

/* Tablets and phones: logo + login/cart on the first row, search below. */
@media (max-width: 767px) {
  .ocin-global-bar__inner {
    min-height: 0;
    padding: 8px 0;
  }
  .ocin-global-bar__brand {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin-right: 12px;
  }
  .ocin-global-bar__actions {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .ocin-global-bar__search {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    margin: 8px 0 0;
  }
  .ocin-global-bar__discover {
    margin-left: 14px;
  }
}

/* Small phones: tighten so logo, Discover, login and cart still fit one row. */
@media (max-width: 479px) {
  .ocin-global-bar__logo-img {
    max-width: 110px;
    max-height: 30px;
  }
  .ocin-global-bar__logo-text {
    font-size: 1.0625rem;
  }
  .ocin-global-bar__discover {
    margin-left: 10px;
    font-size: 0.75rem;
  }
  .ocin-global-bar .ql_login-btn {
    padding: 5px 10px;
  }
  .ocin-global-bar .ql_cart-btn {
    margin-left: 0;
    padding-left: 6px;
    padding-right: 38px;
  }
}

/*
2. Brand bar: newsletter sign-up
---------------------------------------------------------
The form comes from an email plugin. These rules lay out a simple
"email field + button" form on one row and neutralise the theme's
global input styles; the plugin's own form designer still controls
colours/copy. The .ocin-brand-bar prefix gives these enough weight to
beat the theme's `.woocommerce input[type=...]` rules on shop pages.
*/
.ocin-brand-subscribe {
  max-width: 440px;
  margin-left: auto;
  padding-top: 4px;
}
.ocin-brand-bar .ocin-brand-subscribe form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
}
.ocin-brand-bar .ocin-brand-subscribe input[type="email"],
.ocin-brand-bar .ocin-brand-subscribe input[type="text"] {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 160px;
  flex: 1 1 160px;
  width: auto;
  min-width: 0;
  height: 40px;
  margin: 0 8px 0 0;
  padding: 0 12px;
  font-size: 0.9375rem;
  color: #222;
  background-color: #fff;
  border: 1px solid #222;
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.ocin-brand-bar .ocin-brand-subscribe input[type="email"]:focus,
.ocin-brand-bar .ocin-brand-subscribe input[type="text"]:focus {
  border-color: #000;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.ocin-brand-bar .ocin-brand-subscribe button,
.ocin-brand-bar .ocin-brand-subscribe input[type="submit"] {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  font-size: 0.9375rem;
  line-height: 1;
  color: #fff;
  background-color: #111;
  border: 1px solid #111;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background-color 150ms, border-color 150ms;
  -o-transition: background-color 150ms, border-color 150ms;
  transition: background-color 150ms, border-color 150ms;
}
.ocin-brand-bar .ocin-brand-subscribe button:hover,
.ocin-brand-bar .ocin-brand-subscribe button:focus,
.ocin-brand-bar .ocin-brand-subscribe input[type="submit"]:hover,
.ocin-brand-bar .ocin-brand-subscribe input[type="submit"]:focus {
  color: #fff;
  background-color: #444;
  border-color: #444;
}
/* Many form plugins wrap every field in a <p> or <div> (Mailchimp for WP, MailPoet,
   Fluent Forms...). Then the WRAPPER is the flex item, not the input: let the wrapper
   around the email/text field grow, keep the one around the button its natural size,
   and let the input fill its wrapper. (:has() is supported by all current browsers;
   in an ancient one the fields simply stack, which still works.) */
.ocin-brand-subscribe p,
.ocin-brand-subscribe .mailpoet_paragraph {
  margin: 0;
}
.ocin-brand-bar .ocin-brand-subscribe form > *:has(input[type="email"]),
.ocin-brand-bar .ocin-brand-subscribe form > *:has(input[type="text"]) {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 160px;
  flex: 1 1 160px;
  min-width: 0;
  margin: 0 8px 0 0;
}
.ocin-brand-bar .ocin-brand-subscribe form > *:has(input[type="submit"]),
.ocin-brand-bar .ocin-brand-subscribe form > *:has(button) {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 0;
}
.ocin-brand-bar .ocin-brand-subscribe form > * input[type="email"],
.ocin-brand-bar .ocin-brand-subscribe form > * input[type="text"] {
  width: 100%;
  margin: 0;
}
/* ---- MailPoet ----
   MailPoet prints a <style> block per form whose selectors start with #mailpoet_form_N
   (ID specificity) and also writes some styles inline on the fields. Normal theme CSS
   can't beat either, and MailPoet's own support recommends !important for this. So the
   rules below use it -- but ONLY on MailPoet's own classes inside the brand bar's
   sign-up, so nothing else on the site is affected.
   What they fix: every field wrapper carries margin-bottom:20px (which pushed the
   button lower than the field), the field is fixed at 200px wide, the form has its own
   padding/background, and the button ships unstyled. */
.ocin-brand-bar .ocin-brand-subscribe .mailpoet_form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.ocin-brand-bar .ocin-brand-subscribe form.mailpoet_form {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}
.ocin-brand-bar .ocin-brand-subscribe form.mailpoet_form br {
  display: none !important;
}
.ocin-brand-bar .ocin-brand-subscribe .mailpoet_paragraph {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
}
.ocin-brand-bar .ocin-brand-subscribe .mailpoet_paragraph:has(input[type="email"]),
.ocin-brand-bar .ocin-brand-subscribe .mailpoet_paragraph:has(input[type="text"]) {
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 1 160px !important;
  flex: 1 1 160px !important;
  min-width: 0 !important;
  margin-right: 8px !important;
}
.ocin-brand-bar .ocin-brand-subscribe .mailpoet_paragraph:has(input[type="submit"]) {
  -webkit-box-flex: 0 !important;
  -ms-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.ocin-brand-bar .ocin-brand-subscribe input.mailpoet_text {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  font-size: 0.9375rem !important;
  color: #222 !important;
  background: #fff !important;
  border: 1px solid #222 !important;
  border-radius: 4px !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
.ocin-brand-bar .ocin-brand-subscribe input.mailpoet_submit {
  width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  font-size: 0.9375rem !important;
  line-height: 1 !important;
  color: #fff !important;
  background: #111 !important;
  border: 1px solid #111 !important;
  border-radius: 4px !important;
  cursor: pointer;
}
.ocin-brand-bar .ocin-brand-subscribe input.mailpoet_submit:hover,
.ocin-brand-bar .ocin-brand-subscribe input.mailpoet_submit:focus {
  background: #444 !important;
  border-color: #444 !important;
}
.ocin-brand-bar .ocin-brand-subscribe .mailpoet_form_loading {
  margin-left: 8px !important;
}
.ocin-brand-bar .ocin-brand-subscribe .mailpoet_message {
  -webkit-box-flex: 0 !important;
  -ms-flex: 0 0 100% !important;
  flex: 0 0 100% !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  font-size: 0.8125rem !important;
}
.ocin-brand-bar .ocin-brand-subscribe .mailpoet_message p {
  margin: 0 !important;
}

/* Success / error messages drop to their own full-width line. */
.ocin-brand-subscribe .mailpoet_message,
.ocin-brand-subscribe .mc4wp-response {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  margin-top: 6px;
  font-size: 0.8125rem;
}

/* Tablet down: the sign-up is no longer pinned right. */
@media (max-width: 991px) {
  .ocin-brand-subscribe {
    max-width: none;
    margin-left: 0;
  }
}
/* Phones: stacked under the logo/menu. */
@media (max-width: 767px) {
  .ocin-brand-subscribe {
    padding-top: 0;
  }
}

/*
3. RTL
---------------------------------------------------------*/
.rtl .ocin-global-bar__brand {
  margin-right: 0;
  margin-left: 24px;
}
.rtl .ocin-global-bar__discover {
  margin-left: 0;
  margin-right: 22px;
}
.rtl .ocin-global-bar__search {
  margin-right: 0;
  margin-left: 24px;
}
.rtl .ocin-global-bar__actions {
  margin-left: 0;
  margin-right: auto;
}
.rtl .ocin-global-bar .ocin-global-search__input {
  padding: 0 42px 0 14px;
}
.rtl .ocin-global-search__icon {
  left: auto;
  right: 13px;
}
.rtl .ocin-brand-subscribe {
  margin-left: 0;
  margin-right: auto;
}
.rtl .ocin-brand-bar .ocin-brand-subscribe input[type="email"],
.rtl .ocin-brand-bar .ocin-brand-subscribe input[type="text"] {
  margin: 0 0 0 8px;
}
@media (max-width: 767px) {
  .rtl .ocin-global-bar__brand {
    margin-left: 12px;
  }
  .rtl .ocin-global-bar__search {
    margin: 8px 0 0;
  }
}