/* header.css — the store's header on phones and tablets (the theme's mobile layout, ≤ 960 px), compact
   (operator request 2026-10-20): it took ~240 px — a third of an iPhone screen — in four bands (phone,
   socials, logo, icons) with the cart on a line of its own.
     - the gold bar: ONE slim line — the phone on the left, the social icons on the right;
     - the header: ONE row — the logo on the left; search, account, cart and the menu on the right,
       one size, one line; the menu opens as a panel over the page (it pushed the cart down before).
   The logo stays on white: it is gold, and would lose its contrast on the gold bar.
   Theme markup (cake-shop); the storefront is light-only. */
@media (max-width: 960px) {
  /* ── The gold bar ── */
  .wpdevart-top-header { padding: 0 !important; }
  .wpdevart-top-header .wpdevart-top-header-section {
    display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 40px; padding: 2px 12px !important; box-sizing: border-box;
  }
  .wpdevart-top-header .wpdevart-top-header-left-content,
  .wpdevart-top-header .wpdevart-top-header-right-content {
    display: flex !important; align-items: center; width: auto !important; margin: 0 !important; padding: 0 !important; flex: 0 1 auto;
  }
  .wpdevart-top-header .wpdevart-top-header-phone { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; white-space: nowrap; }
  .wpdevart-top-header .wpdevart-social-icons { margin: 0 0 0 6px !important; }

  /* ── The header: one row ── */
  .wpdevart-main-header-section {
    display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px;
    position: relative; padding: 6px 8px 6px 12px !important; box-sizing: border-box;
  }
  .wpdevart-main-header-section .wpdevart-logo-area,
  .wpdevart-main-header-section .wpdevart-main-header-section-mobile-logo { width: auto !important; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }
  .wpdevart-main-header-section .mobile-image-logo-resizing { margin: 0 !important; padding: 0 !important; line-height: 0; }
  .wpdevart-main-header-section .mobile-image-logo-resizing img { height: 52px !important; max-height: 52px !important; width: auto !important; }
  .wpdevart-main-header-section .wpdevart-menu-and-buttons-area { flex: 1 1 auto; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; }
  .wpdevart-main-header-section .wpdevart-menu-and-buttons-container {
    display: flex !important; align-items: center; justify-content: flex-end; gap: 2px; height: auto !important; min-height: 0 !important;
  }
  /* Its wrapper steps aside so search, account and the menu line up with the cart (nav keeps its landmark). */
  .wpdevart-main-header-section .nav-container-without-action-button { display: contents !important; }
  .wpdevart-main-header-section .wpdevart-search-button-icon-mobile { order: 1; }
  .wpdevart-main-header-section .header-woo-account-icon-mobile { order: 2; }
  .wpdevart-main-header-section .header-cart { order: 3; }
  .wpdevart-main-header-section #wpdevartmobilemenu { order: 4; }
  /* Every icon: one 44 px tap target, centred, the same size. */
  .wpdevart-main-header-section .wpdevart-search-button-icon-mobile,
  .wpdevart-main-header-section .header-woo-account-icon-mobile,
  .wpdevart-main-header-section .header-cart {
    position: static !important; display: flex !important; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; float: none !important;
    top: auto !important; left: auto !important; right: auto !important;
  }
  .wpdevart-main-header-section #wpdevartmobilemenu { position: static !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
  /* The theme's empty tinted strip over the menu button: it pushed the button below the other icons. */
  .wpdevart-main-header-section #head-mobile { display: none !important; }
  .wpdevart-main-header-section #wpdevartOpenMenuButton { position: relative !important; width: 44px !important; height: 44px !important; margin: 0 !important; top: auto !important; right: auto !important; }
  .wpdevart-main-header-section .wpdevart-search-button-icon-mobile button,
  .wpdevart-main-header-section .header-woo-account-icon-mobile a,
  .wpdevart-main-header-section .header-cart a.cart-customlocation {
    display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; position: relative;
    text-decoration: none !important;
  }
  .wpdevart-main-header-section .wpdevart-search-button-icon-mobile i,
  .wpdevart-main-header-section .header-woo-account-icon-mobile i,
  .wpdevart-main-header-section .header-cart i { font-size: 22px !important; line-height: 1 !important; margin: 0 !important; }
  /* The cart's count: a small badge on the icon's corner, its number centred — white on the CTA coral
     (#c2493f, 4.9:1; the theme's #f88379 is 2.4:1). */
  .wpdevart-main-header-section .header-cart .custom-cart-count {
    position: absolute !important; top: 3px !important; right: 1px !important; display: flex !important; align-items: center; justify-content: center;
    min-width: 18px !important; width: auto !important; height: 18px !important; padding: 0 4px !important; box-sizing: border-box; margin: 0 !important;
    border-radius: 9px !important; background: #c2493f !important; color: #ffffff !important;
  }
  .wpdevart-main-header-section .header-cart #mini-cart-count { font-size: 11px !important; font-weight: 700; line-height: 1 !important; height: auto !important; width: auto !important; color: inherit !important; }
  /* The theme's mini-cart dropdown (shown on hover) is absolute with no offset on phones, so it sat
     wherever the cart icon was — in one row, hanging off the screen's right edge and making EVERY page
     wider than the phone (iOS then zooms out: white space under the footer, a strip on the right).
     Anchored to the header row's right edge instead (the icons are static; the row is the containing
     block), never wider than the screen. */
  .wpdevart-main-header-section .header-cart .wpdevart-shopping-cart {
    left: auto !important; right: 8px !important; top: 100% !important; margin: 0 !important;
    width: 300px !important; max-width: calc(100vw - 16px) !important; box-sizing: border-box !important;
  }
  /* The menu: a panel over the page, under the whole header row. */
  .wpdevart-main-header-section #wpdevartmobilemenu ul.menu.open {
    position: absolute !important; left: 0; right: 0; top: 100%; z-index: 1000; background: #ffffff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
}