/* Wisial static site: small overrides on top of the original theme CSS. */

/* Full-page loader only on the home page: the theme hid every page until all images had
   loaded, plus 1 s; the other pages show their content as soon as it is ready. */
body:not(.home) .page-preloader-cover {
  display: none !important;
}

/* Twitter is now X: draw the X logo wherever the theme used the Twitter bird (FontAwesome \f099).
   The bird glyph stays in place but invisible, so size, line height and alignment are exactly
   the theme's; the X is painted over it in the icon's own colour (hover effects included). */
.social-list .social-list__items .menu-item > a[href^="https://x.com/"]::before,
.woocommerce.single-product div.product .woo-social-buttons > span.custom.smsb_twitter a:after,
.woocommerce .single-product div.product .woo-social-buttons > span.custom.smsb_twitter a:after,
.cs-share__link[href^="https://x.com/"]::before,
.fa-twitter:before {
  content: "\f099";
  -webkit-text-fill-color: transparent;
  background-color: currentColor;
  -webkit-mask: url("/static/x-logo.svg") no-repeat center / 0.82em 0.82em;
  mask: url("/static/x-logo.svg") no-repeat center / 0.82em 0.82em;
}

.elementor-social-icon-twitter {
  background-color: #000;
}

/* ---------- Phones: compact header ----------
   The theme stacks every header item (phone, e-mail, address, login, socials, logo,
   Client Area, search, cart) into ~420px. Here: one small contact row, then logo on the
   left and the header buttons on the right (~140px). */
@media (max-width: 767px) {
  .top-panel {
    padding: 6px 0 !important;
  }
  .top-panel__inner,
  .top-panel__container,
  .top-panel__wrap-items,
  .top-panel__menus {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px 14px;
  }
  .top-panel .contact-block,
  .top-panel .contact-block__inner {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    margin: 0 !important;
    padding: 0 !important;
  }
  .top-panel .contact-block__item {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Address is in the footer; Login / Sign Up only when the login switch is on. */
  .top-panel .contact-block__item:nth-child(3),
  html:not(.wisial-login) .top-panel .social-login-menu {
    display: none !important;
  }
  .top-panel .social-list {
    margin: 0 !important;
  }

  .header-container {
    padding: 10px 0 !important;
  }
  .header-container__flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .header-container .site-branding {
    margin: 0 !important;
    text-align: left;
    flex: 0 0 auto;
    order: 1 !important;
  }
  .header-container .site-logo__link img {
    width: 130px;
    height: auto;
  }
  .header-container .site-description {
    font-size: 9px;
    white-space: nowrap;
  }
  .header-container .header-nav-wrapper {
    display: flex !important;
    align-items: center;
    margin: 0 0 0 auto !important;
    flex: 0 0 auto;
    width: auto !important;
    order: 2 !important;
  }
  .header-container .header-btn-wrapper {
    margin: 0 !important;
    flex: 0 0 auto;
    order: 3 !important;
  }
  .header-container .header-btn {
    padding: 8px 10px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
  }

  /* No sideways scrolling: product cards keep their wishlist / compare / quick-view
     buttons just outside the card, and the theme's row margins overshoot the screen. */
  html,
  body {
    overflow-x: hidden;
  }

  /* Product lists: two cards per row instead of one very tall column. */
  .woocommerce .products.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
  .woocommerce .products.row > .product:not(.product-list) {
    flex: 0 0 50%;
    width: 50% !important;
    max-width: 50%;
    padding-left: 8px !important;
    padding-right: 8px !important;
    clear: none !important;
  }
  .woocommerce .products.row > .product:not(.product-list) h3,
  .woocommerce .products.row > .product:not(.product-list) h3 a {
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .woocommerce .products.row > .product:not(.product-list) h3 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Footer: quick links in two columns instead of a long single list. */
  #footer-area .widget_nav_menu ul.menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }
  #footer-area .widget_nav_menu ul.menu > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Photo backgrounds (people) that slide under dark text on narrow screens:
     services-page-2, cherry-services/business-plan, careers, partners, team-list.
     Keep the section's plain background colour instead. */
  .elementor-element.elementor-element-0d9b294,
  .elementor-element.elementor-element-yz62n65,
  .elementor-element.elementor-element-eyqgtzs,
  .elementor-element.elementor-element-e4omvxn,
  .elementor-element.elementor-element-chaqqcd,
  .elementor-element-0d9b294 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-yz62n65 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-eyqgtzs > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-e4omvxn > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-chaqqcd > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: none !important;
  }
}