/* Clean neutral header icon buttons (search, cart) */
      .sf-hbtn{display:inline-flex;align-items:center;justify-content:center;background:var(--mk-blue-100-2);color:var(--mk-slate-700);border:none;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;}
      .sf-hbtn:hover{background:var(--mk-blue-200);color:var(--mk-blue-500-2);}
      /* Language flag — one round button, sized and coloured like the search and cart
         buttons beside it so the header row reads as one set. */
      .sf-lang{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
               background:var(--mk-blue-100-2);border-radius:999px;text-decoration:none;
               transition:background .15s;}
      .sf-lang:hover{background:var(--mk-blue-200);}
      .sf-lang .sf-lang-flag{display:block;width:24px;height:16px;border-radius:3px;
                             box-shadow:0 0 0 1px rgba(15,23,42,.14);}
      /* On a phone the header is already four buttons wide; a full-size button pushed
         the shop name onto a second line. Smaller here, still a 38px tap target. */
      @media (max-width: 640px){
        .sf-lang{width:38px;height:38px;}
        .sf-lang .sf-lang-flag{width:21px;height:14px;}
      }
      /* Collapsible header search: when active, hide everything else and let the form fill the row */
      #sf_header_row.sf-searching .sf-hide-on-search{display:none !important;}
      #sf_header_row.sf-searching #sf_search_btn{display:none !important;}
      #sf_header_row.sf-searching #sf_right_group{flex:1 1 auto;width:100%;}
      #sf_header_row.sf-searching #sf_search_form{display:flex !important;}
      .sf-acct-link{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--mk-slate-800-2);text-decoration:none;font-size:14px;border-top:1px solid var(--mk-slate-100);}

      /* ── Account menu as a GRID on a phone ────────────────────────────────
         Eighteen items stacked one per row is a scrolling column that hides
         most of itself below the fold; as a three-across grid of icon tiles the
         whole menu is visible at once and each target is a proper 64px square
         instead of a 40px strip. Desktop keeps the list — a mouse does fine
         with a dropdown, and the header there has room for it. */
      @media (max-width: 640px) {
        #sf_account_dropdown {
          padding: 8px;
          display: none;                      /* the toggle still owns visibility */
        }
        #sf_account_dropdown[style*="block"] {
          display: grid !important;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          align-content: start;
        }
        /* the name/phone header spans the full width above the tiles */
        #sf_account_dropdown > div:first-child {
          grid-column: 1 / -1; border-radius: 12px; border-bottom: 0 !important;
        }
        #sf_account_dropdown .sf-acct-link {
          flex-direction: column; gap: 6px; text-align: center;
          padding: 12px 4px; border-top: 0 !important; border-radius: 12px;
          background: var(--mk-blue-50); font-size: 12px !important; line-height: 1.25;
          min-height: 78px; justify-content: center;
        }
        #sf_account_dropdown .sf-acct-link span:first-child { font-size: 24px; }
        /* the logout form is the last child and must not be squeezed into a cell */
        #sf_account_dropdown > form { grid-column: 1 / -1; }
        #sf_account_dropdown > form button { border-radius: 12px; }
      }

      .sf-acct-link:first-of-type{border-top:none;}
      .sf-acct-link:hover{background:var(--mk-slate-50);color:var(--mk-blue-500-2);}
      /* Mobile: account dropdown spans the full width below the header. */
       @media (max-width: 640px) {
        #sf_account_dropdown {
          position: fixed !important;
          left: 8px !important;
          right: 8px !important;
          top: 62px !important;
          min-width: 0 !important;
          max-height: calc(100vh - 78px);
          overflow-y: auto;
        }
      }